vue百度地图的和element输入框/v-region的联动

第一步：安装插件

npm install vue-baidu-map --save

第二步：main.js中引用

// 百度地图
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
})

第三步：页面中使用

<template>
<div>
  <el-form ref="Froms" :model="formData" :rules="rules" label-width="120px">
    <el-form-item label="详细地址:" prop="shopAddrExt">
      <el-input v-model="formData.shopAddrExt" placeholder="请输入详细地址" size="small" @input="inputShopAddr" />
      <div class="map">
        <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="initMap" @click="getLocation">
    	  <!-- 缩放 -->
    	  <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
	    </baidu-map>
      </div>
     </el-form-item>
     <el-form-item label="经营地区:" prop="businessArea">
        <!-- 要安装v-region -->
     	<v-region-group
          :town="false"
          v-model="regionArea"
          @change="regionChange"
        >
        </v-region-group>
   </el-form>
 </div>
</template>
<script>
export default {
  data () {
    return {
      formData: {shopAddrExt: '', businessArea: ''},
      center: {lng: 0, lat: 0},
      zoom: 10,
      BMap: null,
      map: null,
      rules:{},
      regionArea: {}
    }
  },
  methods: {
    // 初始化
    initMap ({BMap, map}) {
      console.log(BMap, map)
      this.zoom = 15;
      this.BMap = BMap;
      this.map = map;
      this.geoCoder = new BMap.Geocoder(); // 创建地址解析器的实例
      let geolocation = new BMap.Geolocation(); // 获取当前经纬度用作地图显示中心点
      geolocation.getCurrentPosition((e)=>{
        console.log(e);
        this.center.lng = e.longitude;
        this.center.lat = e.latitude;
        this.setCenterZoom(e); // e获取到经纬度设置地图中心点
        this.setIcon(e); // 创建点坐标
    }
    // zoomend：监听地图缩放结束事件 lng表示经度，lat表示纬度(处理百度地图放大之后中心点偏移问题)
    // zoomstart：还有一个监听地图缩放开始事件用法和zoomend一样
     this.map.addEventListener('zoomend', (e)=> {
       this.map.centerAndZoom(
       new BMap.Point(this.center.lng, this.center.lat),
         this.map.getZoom()
       );
     });
  },
   // 设置显示中心点
   setCenterZoom(e){
     this.center.lng = e.longitude;
     this.center.lat = e.latitude;
     this.centerPoint = new BMap.Point(e.longitude, e.latitude); // 选择一个经纬度作为中心点
     this.map.centerAndZoom(this.centerPoint, 14); // 设置地图中心点和缩放级别
  },
  // 创建点坐标
  setIcon(latLng){
  	// 创建自定义标记 参数:自定义图片路径 大小 偏移量(！！！注意：如果这里icon不显示请检查图片大小是否和下面配置的new BMap.size一致)
     const icon = new BMap.Icon(
       require('../../../../../static/icon/position4.png'),
       new BMap.Size(32, 32),
       // { anchor: new BMap.Size(0, 0) }
     )
     // 生成自定义图标点
     // 创建点
     const point = new BMap.Point(latLng.longitude, latLng.latitude);
     // 创建标注
     const marker = new BMap.Marker(point, { icon: icon });
     this.map.clearOverlays(); // 先删除
     this.map.addOverlay(marker);// 将标注添加到地图中
     // 给标记点添加点击事件
     marker.addEventListener('click', (e) => {
       // 执行想进行的操作(经个人测试在此处注册点击事件效果最佳, 该有的数据项都可以获取)
       console.log(e)
     })
  },
  // 获取地图点击的地址
  getLocation(e){
    // console.log(e.point)
    let latLng = {
      longitude: e.point.lng,
      latitude: e.point.lat
    }
    this.setCenterZoom(latLng);// 更改地图显示中心点
    this.setIcon(latLng);// 创建点坐标
    this.geoCoder.getLocation(e.point, (rs) => {
      // console.log(rs.surroundingPois) // 附近的POI点(array) 
      // console.log(rs.business) // 商圈字段
      let adr = rs.addressComponents;
      let address = adr.province + adr.city + adr.district + adr.street + adr.streetNumber; // 省市区街道门牌号
      this.formData.shopAddrExt = address; // 给input框赋值
    })
  },
 // 根据输入的地址定位获取当前经纬度/根据当前地址获取经纬度
 inputShopAddr(inputValue){
   this.geoCoder.getPoint(inputValue, (point) => {
     let latLng = {
        longitude: point.lng,
        latitude: point.lat
     }
     this.setCenterZoom(latLng);// 更改地图显示中心点
     this.setIcon(latLng);// 创建点坐标
   })
 },
 ///
 // 这里我还用了中国行政区划选择器v-region和地图的联动
 regionChange (data) {
    console.log(data)
    let province = data.province ? data.province.value : '';
    let city = data.city ? data.city.value : '';
    let area = data.area ? data.area.value : '';
    this.formData.businessArea = province + city + area;
    this.formData.shopProvinceId = data.province ? data.province.key : '';
    this.formData.shopCityId = data.city ? data.city.key : '';
    this.formData.shopCountryId = data.area ? data.area.key : '';
    this.inputShopAddr(this.formData.businessArea);
  }
}
</script>
<style>
  .map{
    width: 430px;
    height: 280px;
  }
  .BMap_cpyCtrl,
  .BMap_noprint {
    display: none;
   }
   .BMap_cpyCtrl,
   .anchorBL {
      inset: auto auto 0px 1px !important;
    }
</style>