vue + 百度地图
地址 有效半径 联动
上代码
// main.js
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap,{
ak:'............'}) // 此处key 需要在百度官网注册
// 用到的组件
// html
<el-form ref="form" :model="activityInfo" label-width="150px">
<el-form-item label="详细地址" style="width: 745px">
<el-input
placeholder="请输入详细地址"
v-model="activityInfo.signAddress"
clearable
@blur="OutFocus"
></el-input>
</el-form-item>
<el-form-item v-if="activityInfo.scopeCheck=='1'" label="有效半径">
<el-slider
v-model="activityInfo.signDistance"
:min="500"
show-tooltip
:step="100"
:max="5000"
show-stops
show-input
></el-slider>
</el-form-item>
</el-form>
// 上面代码为搜索部分
<baidu-map
id="allmap"
:scroll-wheel-zoom="true"
class="map"
:center="{lng: 116.404, lat: 39.915}"
:zoom="15"
@click="paintPolyline"
>
<bm-marker :position="atl" :dragging="true" @dragend="dragEvent"></bm-marker>
<bm-circle :center="atl" :radius="activityInfo.signDistance"></bm-circle>
<bm-local-search :keyword="locations" :auto-viewport="true" :panel="false"></bm-local-search>
</baidu-map>
// 逻辑
export default {
name: "index",
mixins: [blankPage, pageLoading, dictData, unitFormatMix],
components: {
TableButton, ValidationObserver, draggable, Clipboard },
data() {
return {
activityInfo: {
signAddress: "",
signDistance: 500,
scopeCheck: 1,
},
atl: {
lng: "108.847003",
lat: "34.217215"
}, // 红色 标注位置
locations: "陕西西安" // 默认定位到 陕西西安
}
}
methods:{
// 拖动标注
dragEvent(event) {
this.atl = event.point;
},
// 点击定位 获取经纬度 修改红色标注位置
paintPolyline(e) {
this.atl.lng = e.point.lng;
this.atl.lat = e.point.lat;
},
// 搜索地址
OutFocus(val) {
this.locations = val;
},
}
}