百度地图vue-baidu-map自动定位，鼠标选点并进行逆解析，地区检索，配合使用使用案列以及解决方案

百度地图vue-baidu-map自动定位，鼠标选点并进行逆解析，地区检索，配合使用使用案列以及解决方案

效果图如下

效果图

三个需求：1.用户进入这一页的时候需要获取定位信息，移至地图中心。2.当用户输入店铺地址的时候，地图上会出现符合条件的检索条目。3.用户鼠标右击地图的时候可以选定坐标点，并且逆解析出该点的详细地址信息，并回显到输入框中

准备工作

安装vue-baidu-map

$ npm install vue-baidu-map --save

局部注册

//引入组件
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmGeolocation, BmLocalSearch, BmNavigation, BmMarker } from 'vue-baidu-map'

//在vue生命周期里注册组件
  components: {
    // 地图
    BaiduMap,
    // 手动定位控件
    BmGeolocation,
    // 检索控件
    BmLocalSearch,
    // 地图放大缩小控件
    BmNavigation,
    // marker控件
    BmMarker
  },

实现vue-baidu-map自动定位

先只需要关注baidu-map组件即可，具体的文档可以去vue-baidu-map去看，首先要实现自动定位我们需要用到baidu-map的center属性和ready方法
center：指定地图中心点
ready在地图加载完成之后触发，可以拿到BMap，和map实例
ready方法代码如下

    mapReady ({ BMap, map }) {
      const _this = this
      // 获取自动定位方法
      var geolocation = new BMap.Geolocation()
      // 获取逆解析方法实例
      this.myGeo = new BMap.Geocoder()
      // 获取自动定位获取的坐标信息
      geolocation.getCurrentPosition(
        function (r) {
          _this.center = {
            lng: r.point.lng,
            lat: r.point.lat
          }
          _this.point = {
            lng: r.point.lng,
            lat: r.point.lat
          }
        },
        { enableHighAccuracy: true }
      )
    },

实现当用户输入店铺地址的时候，地图上会出现符合条件的检索条目

//本地检索组件

思路如下
1.当用户在输入框输入地址的时候，点击搜索图标，把输入框的值赋给keyword字段
2.当keyword赋值新的值以后，会自动触发searchcomplete事件，获取通过条件得到的检索点，并自动展示在地图上

在这里插入图片描述

实现用户鼠标右击地图的时候可以选定坐标点，并且逆解析出该点的详细地址信息，并回显到输入框中

为实现这个目标我们需要用到marker组件，这个组件展示当前选中的坐标位置，以便用户能够很清晰得查看
需要用到baidu-map的右键事件
需要用到BMap实例中的逆解析方法

marker组件

baidu-map的右键事件以及逆解析方法

    selectPoint ({ type, target, point, pixel, overlay }) {
      this.point = point
      const _this = this
      // 根据坐标逆解析获取地址详细描述
      this.myGeo.getLocation(point, function (result) {
        if (result) {
          _this.city = result.addressComponents.city
          _this.province = result.addressComponents.province
          _this.district = result.addressComponents.district
          //把得到的详细地址的信息回显给用户
          _this.openShopData.shopAdder =
            result.surroundingPois.length > 0
              ? result.surroundingPois[0].address + result.surroundingPois[0].title
              : result.address
          _this.form.setFieldsValue({
            openShopData: _this.openShopData
          })
        }
      })
    },
    mapReady ({ BMap, map }) {
      const _this = this
      // 获取自动定位方法
      var geolocation = new BMap.Geolocation()
      // 获取逆解析方法实例
      this.myGeo = new BMap.Geocoder()
      // 获取自动定位获取的坐标信息
      geolocation.getCurrentPosition(
        function (r) {
          _this.center = {
            lng: r.point.lng,
            lat: r.point.lat
          }
          _this.point = {
            lng: r.point.lng,
            lat: r.point.lat
          }
        },
        { enableHighAccuracy: true }
      )
    },

在这里插入图片描述

完整代码如下

文章有不足，还请指导