vue引入百度地图vue-baidu-map

首先，安装

npm i vue-baidu-map --save

会遇到跨域的问题就需要引入jsonp来解决(只能解决get请求，刚好这里的请求都是get请求)

npm i vue-jsonp -S

然后引入

//main.js
import BaiduMap from "vue-baidu-map";
import { VueJsonp } from "vue-jsonp";
Vue.use(VueJsonp);
Vue.use(BaiduMap, {
  ak: "你在百度开发者文档中申请的key"
});

ps:我这里申请的是服务端的key

在需要的页面贴上如下代码

//xxxx.vue
<template>
 <baidu-map class="map" :center="this.frameCenter" :zoom="this.zoom">
   <baidu-map class="map" :center="this.frameCenter" :zoom="this.zoom">
      <!-- 放大缩小 -->
      <bm-navigation type="BMAP_NAVIGATION_CONTROL_SMALL" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <!-- 标记点 -->
      <bm-marker :position="{ lng: markers.lng, lat: markers.lat }" :dragging="true" @dragend="getMapCenter">
      </bm-marker>
      </baidu-map>
 </baidu-map>
</template>

zoom设置的事比例尺大小。center是地图显示位子的中心，center的值可以是经纬度，也可以是详细的地址

我的需求是要根据省市区地图自动跳转，然后最后拖拽标记点获取该地点的经纬度

百度地图的行政区划查询服务功能是在2021年3月3号才出来的，好像存在跨域问题（试过好几次都这样，也可能是太菜了）

这里我就想了一个骚操作调用的是高德地图的数据，emmmmm~~反正数据源的问题解决了

地理编码

//xxx.vue
this.$jsonp("http://api.map.baidu.com/geocoding/v3/", {
        address: '湖北省武汉市xxxx',
        output: "json",
        ak: "你在百度开发者文档中申请的key"
      })
        .then(res => {
        console.log(res)
        })
        .catch(err => {
          console.log(err);
        });

可能会出现的问题就是有写地址名字差不太多就会导致，标记点不在画框内，将上面的逆地址解析简单的封装一下，然后用获得的经纬度去做定位要更加准确一些。

emmmmmm~~又来了一个新需求。需要把输入框做成输入地址联想输入，大概就是这样

        <el-form-item label="详细地址：" label-width="140px">
        //这个就是新增的输入框
          <el-autocomplete
            v-model="formList.hourseQuery.address"
            :fetch-suggestions="querySearch"
            placeholder="请输入详细地址"
            style="width: 100%"
            :trigger-on-focus="false"
            @select="handleSelect"    //点击搜索值的时候触发这个请求
          />
         //这个就是新增的输入框
        </el-form-item>
 <el-form-item label="地图上的位置：" label-width="140px">
          <baidu-map
            class="map"
            :center="this.frameCenter"
            :zoom="this.zoom"
            @ready="handlerBMap"  //*******************这个事件是新增的*********************
          >
            <!-- 放大缩小 -->
            <bm-navigation
              type="BMAP_NAVIGATION_CONTROL_SMALL"
              anchor="BMAP_ANCHOR_TOP_RIGHT"
            ></bm-navigation>
            <!-- 标记点 -->
            <bm-marker
              :position="{ lng: markers.lng, lat: markers.lat }"
              :dragging="true"
              @dragend="getMapCenter"
            >
            </bm-marker>
          </baidu-map>
        </el-form-item>

//js部分
    handlerBMap({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      if (this.mapLocation.coordinate && this.mapLocation.coordinate.lng) {
        this.markers.lng = this.mapLocation.coordinate.lng;
        this.markers.lat = this.mapLocation.coordinate.lat;
        map.addOverlay(new this.BMap.Marker(this.mapLocation.coordinate));
      }
    },
    querySearch(queryString, cb) {
      console.log(queryString, cb, 55556);
      var that = this;
      var myGeo = new this.BMap.Geocoder();
      myGeo.getPoint(
        queryString,
        function(point) {
          if (point) {
            that.mapLocation.coordinate = point;
            // that.makerCenter(point);
          } else {
            that.mapLocation.coordinate = null;
          }
        },
        this.locationCity
      );
      var options = {
        onSearchComplete: function(results) {
          console.log(results, 333);
          if (local.getStatus() === 0) {
            // 判断状态是否正确
            var s = [];
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              var x = results.getPoi(i);
              var item = { value: x.address + x.title, point: x.point };
              s.push(item);
              cb(s);
            }
          } else {
            cb();
          }
        }
      };
      var local = new this.BMap.LocalSearch(this.map, options);
      local.search(queryString);
    },
    handleSelect(e) {
      this.formList.hourseQuery.latitude = e.point.lat;
      this.formList.hourseQuery.longtitude = e.point.lng;
      var cityValue = this.cityValue + this.formList.hourseQuery.address;
      this.gainAddress(cityValue);
      this.zoom = 20;
    },

这个是借鉴了https://www.cnblogs.com/aquilahkj/p/11308271.html这个大佬的博客，自己做了一部分修改，删除了一些没有必要的操作
this.gainAddress(cityValue)这个请求是获取当前位子的经纬度的请求，通过获取到的值，赋值给地图部分。

    gainAddress(cityValue) {
      this.$jsonp("https://api.map.baidu.com/geocoding/v3/", {
        address: cityValue,
        output: "json",
        ak: "自己申请的key"
      })
        .then(res => {
          this.markers.lng = res.result.location.lng;
          this.markers.lat = res.result.location.lat;
          this.frameCenter = res.result.location;
        })
        .catch(err => {
          console.log(err);
        });
    },  
    ```