Vue-baidu-map覆盖物动态增加（多边形、标记点）

安装：npm install vue-baidu-map --save 

实现效果：

 页面增加标记及多边形等覆盖物，标记可点击及拖拽调整，同时也可通过关键词搜索获取获取经纬度，调整标记点位置，获取推荐几个地址，问题地址下拉选择其中一个地址等

marker.vue组件

<template>
  <div class="markmap">
    <baidu-map
      id="baiduMap"
      ak="123"
      class="baidu-map bm-view"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="false"
      :mapClick="false"
      @ready="handlerMap"
      @click="mapClickFun"
    >
      <bm-marker
        :dragging="marker.dragging || false"
        v-for="(marker, index) of markers"
        :key="index"
        :position="{ lng: marker.lng, lat: marker.lat }"
        @click="lookDetail(marker)"
        @dragend="markerDragendEvent"
        :icon="{
          url: marker.icon
            ? marker.icon
            : 'http://api0.map.bdimg.com/images/marker_red_sprite.png',
          size: { width: 50, height: 65 },
        }"
      ></bm-marker>
      <bm-polygon
        v-if="path && path.length > 0"
        :path="path"
        :strokeColor="strokeColor"
      ></bm-polygon>
      <!--   <bm-panorama anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-panorama>  -->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-navigation>
      <!--  <bm-scale  anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale> -->
      <BmGeolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></BmGeolocation>
      <!--  <bmLocalSearch v-if="searchKeyword" :autoViewport="true" :keyword="searchKeyword" :panel="false" :selectFirstResult="true" @searchcomplete="searchcomplete"></bmLocalSearch> -->
    </baidu-map>
  </div>
</template>
 
<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmMarker from "vue-baidu-map/components/overlays/Marker.vue";
import BmPolygon from "vue-baidu-map/components/overlays/Polygon.vue";
import BmPanorama from "vue-baidu-map/components/controls/Panorama.vue";
import BmNavigation from "vue-baidu-map/components/controls/Navigation.vue";
import BmScale from "vue-baidu-map/components/controls/Scale.vue";
import BmGeolocation from "vue-baidu-map/components/controls/Geolocation.vue";
import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch.vue";
export default {
  props: {
    canAddMarker: {
      type: Boolean,
      default: false,
    },
    searchKeyword: String,
    keyword: {
      type: [Array, String],
    },
    strokeColor: {
      type: String,
      default: "#2A8DFF",
    },
    path: {
      type: Array,
      default: () => [],
    },

    markers: {
      type: Array,
      default: () => [],
    },
    pcenter: {
      type: Object,
      default: () => ({
        lng: 114.97731018066408,
        lat: 25.8246784210205,
      }),
    },
  },
  components: {
    BaiduMap,
    BmMarker,
    BmPolygon,
    BmPanorama,
    BmNavigation,
    BmScale,
    BmGeolocation,
    BmLocalSearch,
  },
  watch: {
    searchKeyword: {
      handler(val) {
        if (val) {
          this.localSearchFun();
        }
      },
    },
    pcenter: {
      handler(val) {
        this.center = val;
      },
    },
  },
  data() {
    return {
      zoom: 13,
      center: {
        lng: 114.97731018066408,
        lat: 25.8246784210205,
      },
    };
  },
  created() {},
  mounted() {
    this.suofang();
  },
  methods: {
    handlerMap({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
    },
    //点击地图事件 增加标记点
    mapClickFun(e) {
      if (this.canAddMarker) {
        const _this = this;
        let geoc = new BMap.Geocoder();
        geoc.getLocation(e.point, function (rs) {
          _this.$emit("updateMarkerLocal", e.point, rs);
        });
      }
    },
    //缩放
    suofang() {
      document.querySelector(".bm-view").onmousewheel = (e) => {
        e = e || window.event;
        if (e.stopPropagation) {
          //这是取消冒泡
          e.stopPropagation();
        } else {
          e.cancelBubble = true;
        }
        if (e.preventDefault) {
          //这是取消默认行为，要弄清楚取消默认行为和冒泡不是一回事
          e.preventDefault();
        } else {
          e.returnValue = false;
        }
        //放大 getZoom返回地图当前缩放级别
        if (e.wheelDelta > 0) {
          this.zoom = this.zoom + 1;
          if (this.zoom > 19) {
            this.zoom = 19;
          }
        }
        //缩小
        if (e.wheelDelta < 0) {
          e.cancelBubble = true;
          this.zoom = this.zoom - 1;
          if (this.zoom < 4) {
            this.zoom = 4;
          }
        }
      };
    },
    //拖拽标记  获取周边地址供选择
    markerDragendEvent(e) {
      console.log(e);
      const _this = this;
      let geoc = new BMap.Geocoder();
      geoc.getLocation(e.point, function (rs) {
        _this.$emit("updateMarkerLocal", e.point, rs);
      });
    },
    //关键词搜索
    localSearchFun(searchWord) {
      const _this = this;
      this.$nextTick(() => {
        const local = new BMap.LocalSearch(this.map, {
          onSearchComplete: function (e) {
            _this.$emit("searchcomplete", e);
          },
        });
        local.search(searchWord ? searchWord : this.searchKeyword);
      });
    },
    lookDetail() {},
    searchcomplete(e) {},
  },
};
</script>
<style lang="scss" scoped>
.markmap {
  width: 800px;
  height: 500px;
  .baidu-map {
    width: 100%;
    height: 100%;
  }
}
</style>

页面

<template>
  <div class="">
    <el-form :model="form" label-width="155px">
      <el-form-item label="点击Map获取地址信息">
        <el-autocomplete
          class="myinput"
          v-model="form.address"
          :fetch-suggestions="queryAddressSearch"
          placeholder="请输入"
          @select="handleAddressSelect"
          :maxlength="20"
          clearable
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="关键搜索获取经纬度">
        <el-input
          v-model="form.address1"
          placeholder="请输入关键词搜索，如赣州市"
          maxlength="20"
        ></el-input>
      </el-form-item>
    </el-form>

    <markerMap
      ref="mydrawMap"
      class="mymap-wrap"
      :canAddMarker="canAddMarker"
      :path="path"
      :strokeColor="strokeColor"
      :pcenter="center"
      :markers="markers"
      :searchKeyword="form.address1"
      @searchcomplete="searchcomplete"
      @updateMarkerLocal="updateMarkerLocal"
    ></markerMap>
  </div>
</template>

<script>
import markerMap from "@/components/Map/marker";
export default {
  props: [],
  components: { markerMap },
  data() {
    return {
      form: {
        address: "",
      },
      canAddMarker: true,
      strokeColor: "#CC16EF",
      center: {
        lng: "114.933625",
        lat: "25.85190",
      },
      path: [
        { lng: 114.92785540582945, lat: 25.83652466645269 },
        { lng: 114.92823026067752, lat: 25.847650021588933 },
        { lng: 114.93326455552047, lat: 25.84679557530646 },
        { lng: 114.94444120792562, lat: 25.847283346808027 },
        { lng: 114.94666935084885, lat: 25.846470393187857 },
        { lng: 114.94991319176417, lat: 25.844372292159633 },
        { lng: 114.9536417373817, lat: 25.840323628122093 },
        { lng: 114.95646285382479, lat: 25.83860005841268 },
        { lng: 114.96159150781574, lat: 25.83115605191992 },
        { lng: 114.96356808621543, lat: 25.824976622119365 },
        { lng: 114.9643227797862, lat: 25.82133385975571 },
        { lng: 114.9613758810813, lat: 25.81834150683285 },
        { lng: 114.9581414800636, lat: 25.816454984607688 },
        { lng: 114.95318206516998, lat: 25.81499128286883 },
        { lng: 114.950630482145, lat: 25.813495035728792 },
        { lng: 114.94502418704789, lat: 25.80816043559642 },
        { lng: 114.93953141347649, lat: 25.80412817087722 },
        { lng: 114.93648047520966, lat: 25.807707561717777 },
        { lng: 114.94762118982572, lat: 25.816164775470398 },
        { lng: 114.93985862738357, lat: 25.82410099603871 },
        { lng: 114.94194301915044, lat: 25.826117491923867 },
        { lng: 114.94172739241593, lat: 25.839321438580683 },
        { lng: 114.93834924024202, lat: 25.839256398119232 },
        { lng: 114.92785540582945, lat: 25.83652466645269 },
      ],
      markers: [
        {
          lng: "114.933625",
          lat: "25.85190",
          icon: "data:image/png;base64,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",
        },
        /* {
          lat: "25.826759824838696",
          lng: "114.94770203106496",
          dragging: true,
          icon: "data:image/png;base64,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",
          offset: [3, -18],
        }, */
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    queryAddressSearch(queryString, cb) {
      var restaurants = [];
      if (this.restaurants) {
        restaurants.push({
          value: this.restaurants.address,
          point: this.restaurants.point,
        });
        this.restaurants.surroundingPois.forEach((item) => {
          restaurants.push({
            value: item.address + "-" + item.title,
            point: item.point,
          });
        });
      }
      let results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleAddressSelect(e) {
      this.form.address = e.value;
    },
    //输入关键词获取地址经纬度，在地图上标记 （橙色）
    searchcomplete(e) {
      if (e && e.Yr && e.Yr.length > 0) {
        const point = e.Yr[0].point;

        this.updateStoreMark(point);
      }
    },
    updateStoreMark(point) {
      this.center = point;
      const address = {
        ...point,
        icon: require("@/assets/shop.png"),
      };
       this.$message('lng:'+point.lng+",lat:"+point.lat);
      this.markers.splice(0, 1, address);
    },
    //点击地图新增标记或者移动标记位置  （红色）
    updateMarkerLocal(point, rs) {
      this.restaurants = rs;
      console.log(rs);
      this.form.address=rs.address
      this.addProblemAddressMark(point, false);
    },
    addProblemAddressMark(point, updateCenter = true) {
      const address = {
        ...point,
        dragging: true,
        icon: require("@/assets/address.png"),
        offset: [3, -18],
      };
      const len = this.markers.length || 0;
      if (len <= 1) {
        this.markers.push(address);
      } else {
        this.markers.splice(len - 1, 1, address);
      }
      
      if (updateCenter) {
        this.center = point;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input,.el-autocomplete{
    width: 400px;
}
</style>