手动定位，输入关键词，实现智能提示 要实现的效果

image.png

vue 引入vue-baidu-map 使用npm 引入

npm install vue-baidu-map --save

在vue 里面引入地图

<baidu-map
          :center="center"
          :zoom="zoom"
          class="map"
          scroll-wheel-zoom
          @ready="mapReady"

          id="allmap"
        >
         
        </baidu-map>

在vue 里使用自动检索

el-form-item label="手动定位" class="mgb0">
            <el-autocomplete
              v-model="searchA"
              ref="autocomplete"
              placeholder="请输入内容"
              :fetch-suggestions="querySearchAsync"
              @select="manualSearch"
            ></el-autocomplete>
          </el-form-item>

js 代码

变量定义

data(){
return{
 point: null,
      center: { lng: 116.404, lat: 39.915 },
      BMap: null,
      map: null,
      searchA: null,
      manualPoint: null,
      ac: null,
}

map ready 代码

 /**
     * 重新定位地图
     */
    mapReady ({ BMap, map }) {
      let point = new BMap.Point(this.center.lng, this.center.lat) // 默认北京
      map.centerAndZoom(point, this.zoom)
      this.BMap = BMap
      this.map = map

        bGeolocation()
    
      function bGeolocation (that) {
        geolocation.getCurrentPosition(function (r) {
          if (this.getStatus() === BMAP_STATUS_SUCCESS) {
            let mk = new BMap.Marker(r.point)
            that.manualPoint = r.point
            map.addOverlay(mk)
            map.panTo(r.point)
            // 坐标转换完之后的回调函数
            geoc.getLocation(r.point, function (rs) {
              that.address = rs.address
            })
          } else {
            alert('failed' + this.getStatus())
          }
        }, { enableHighAccuracy: true })
      }

      this.ac = new BMap.Autocomplete( // 建立一个自动完成的对象
        {
          input: this.$refs.autocomplete.$el.querySelector('input'),
          location: map,
          onSearchComplete: (e) => {
            this.autoResult = []
            let length = e.getNumPois()
            for (let i = 0; i < length; i++) {
              let json = {
                id: i,
                value: e.getPoi(i).business
              }
              console.log(e.getPoi(i))
              this.autoResult.push(json)
            }
          }
        })
    },

input 框 提示

 /**
     * 智能检索提示
     */
    querySearchAsync (queryString, cb) {
      cb(this.autoResult)
    },

点击提示框检索关键字

 /**
     * 手动定位
     */
    manualSearch (e) {
      this.map.clearOverlays()

      var local = new this.BMap.LocalSearch(this.map, {
        onSearchComplete: (results) => {
          let length = results.getNumPois()
          this.map.centerAndZoom(results.getPoi(0).point, this.zoom * 10)
          this.address = results.getPoi(0).address
          for (let i = 0; i < length; i++) {
            let point = results.getPoi(i).point
            this.map.addOverlay(new this.BMap.Marker(point)) // 添加标注
          }
        }
      })
      local.search(e.value)
    },