vue + 百度地图

vue + 百度地图

百度地图 获取key

地址 有效半径 联动

   上代码

// 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;
    },
  }
}