vue中使用baidu-map：根据详细地址、经纬度进行地图定位

1.全局安装与引用
（1）安装

npm install vue-baidu-map --save

（2）全局引用

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '4258*******************97ddfd'
})

2.使用
（1）HTML

<div style="width: 50%">
            <el-form-item label="详细地址" :required="true" prop="address">
              <el-input
                v-model="formName.address"
                :readonly="readonly"
                class="from_detailed"
                placeholder="请输入详细地址"
              />
            </el-form-item>
          </div>
<div class="nwe_shop_store" style="width: 50%">
            <div class="from_longitudes">
              <el-form-item label="经度" :required="true" prop="longitude">
                <el-input
                  v-model="formName.longitude"
                  placeholder="输入或选择商城或点击地图获取"
                  :readonly="readonly"
                  class="from_longitude"
                  @change="scanMap"
                />
              </el-form-item>
              <el-form-item label="纬度" :required="true" prop="longitude">
                <el-input
                  v-model="formName.latitude"
                  placeholder="输入或选择商城或点击地图获取"
                  :readonly="readonly"
                  class="from_longitude"
                  @change="scanMap"
                />
              </el-form-item>
            </div>
          </div>
          <el-form-item label="定位" :required="true">
            <!-- <el-input v-model="formName.location" class="from_location" /> -->
            <div v-loading="loadingMap" class="dw">
              <baidu-map
                :center="center"
                :zoom="zoom"
                :scroll-wheel-zoom="true"
                class="dw"
                @click="getLocationPoint"
                @ready="handler"
              >
                <bm-view style="width: 100%; height: 100%; flex: 1" />
                <bm-local-search
                  :keyword="formName.address"
                  :auto-viewport="true"
                  style="display: none"
                />
              </baidu-map>
            </div>
          </el-form-item>

（2）Script中DATA参数定义

 center: {
   lng: 113.027698,
   lat: 28.144912,
  }, // 定位信息
 zoom: 13, // 定位信息
 formName: {
  location: '',
  longitude: '',
  latitude: '',
  address: ''
 }

（3）Script中的Methods方法

getLocationPoint(e) {
      // 点击触发搜索
      // eslint-disable-next-line no-undef
      const geoCoder = new BMap.Geocoder();
      // 获取位置对应的坐标
      geoCoder.getPoint(this.addressKeyword, (point) => {
        this.selectedLng = point.lng;
        this.selectedLat = point.lat;
        // console.log(point)
      });
      // 利用坐标获取地址的详细信息
      geoCoder.getLocation(e.point, (res) => {
        console.log(res);
        // this.formName.address = res.address // 赋值地址
        this.formName.longitude = res.point.lng; // 赋值经度
        this.formName.latitude = res.point.lat; // 纬度
      });
      setTimeout(() => {
        this.scanMap();
      }, 500);
    },
    handler({ BMap, map }) {
      console.log("map函数");
      this.BMap = BMap;
      this.map = map;
      this.scanMap();
    },
    scanMap() {
      this.map.clearOverlays();
      if (this.formName.longitude === "" || this.formName.latitude === "") {
        // 默认地址
        this.center = {
          lng: 113.027698,
          lat: 28.144912,
        };
        var point = new this.BMap.Point(113.027698, 28.144912); // 根据经纬度创建点坐标
        console.log("经纬度空的");
      } else {
        this.center = {
          lng: this.formName.longitude,
          lat: this.formName.latitude,
        };
        // eslint-disable-next-line no-redeclare
        var point = new this.BMap.Point(
          this.formName.longitude,
          this.formName.latitude
        ); // 根据经纬度创建点坐标
      }
      this.map.centerAndZoom(point, 17);
      var marker = new this.BMap.Marker(point); // 创建标注
      this.map.addOverlay(marker); // 将标注添加到地图中
      this.zoom = 17;
    },

因项目需求，通过多方查找资料与交流所得。如有侵权，请联系删除！