vue-baidu-map搜索地点

一、效果图

二、代码

<template>
  <div class="app-container">
    <el-autocomplete
      v-model.trim="address"
      :fetch-suggestions="querySearch"
      placeholder="请输入详细地址"
      style="width: 100%"
      :trigger-on-focus="false"
      @select="handleSelect"
    />
    <div style="margin: 5px">
      <baidu-map
        class="bm-view"
        :center="mapCenter"
        :zoom="mapZoom"
        @click="paintPolyline"
        :scroll-wheel-zoom="true"
        ak="baidu-ak"
        @ready="handlerBMap"
      >
        <bm-marker :position="mapCenter"> </bm-marker>
      </baidu-map>
    </div>
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
export default {
  name: "Map",
  components: {
    BaiduMap,
  },
  
  data() {
    return {
      mapZoom: 17,
      mapCenter: { lng: 117.233441, lat: 31.826885 },
    
      coordinate: "",
      address: "",
    };
  },
  created() {
    //console.log(this.longitude, this.latitude, 2);
  },
  methods: {
    async handlerBMap({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      map.disableDoubleClickZoom() //禁止双击地图放大
      //禁止双指缩放disablePinchToZoom()
      // map.disableDoubleClickZoom() //禁止缩放
     //map.enableScrollWheelZoom(false); //开启鼠标滚轮缩放
     	map.disableDragging();     //禁止拖拽
      if (this.coordinate && this.coordinate.lng) {
        this.mapCenter.lng = this.longitude;
        this.mapCenter.lat = this.latitude;
        this.mapZoom = 17;
        map.addOverlay(new this.BMap.Marker(this.coordinate));
      } else {
        this.mapCenter.lng = this.longitude || 117.233441;
        this.mapCenter.lat = this.latitude || 31.826885;
        this.mapZoom = 17;
      }
    },
    querySearch(queryString, cb) {
      var that = this;
      var myGeo = new this.BMap.Geocoder();
      myGeo.getPoint(
        queryString,
        function(point) {
          if (point) {
            that.coordinate = point;
            that.makerCenter(point);
          } else {
            that.coordinate = null;
          }
        },
        this.locationCity
      );
      var options = {
        onSearchComplete: function(results) {
          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);
    },
    paintPolyline(item) {
      var { point } = item;
      this.flag = true;
      this.makerCenter(point);
    },
    handleSelect(item) {
      var { point } = item;
      this.coordinate = point;
      //console.log(point);
      this.makerCenter(point);
    },
    makerCenter(point) {
      if (this.map) {
        this.map.clearOverlays();
        this.map.addOverlay(new this.BMap.Marker(point));
        this.mapCenter.lng = point.lng;
        this.mapCenter.lat = point.lat;
        this.mapZoom = 17;
        this.mapCenter= { lng: point.lng, lat: point.lat }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>