百度离线地图覆盖物动态增加（多边形、标记点）

Holly31

已于 2023-07-24 14:43:07 修改

阅读量945

点赞数

分类专栏：第三方插件文章标签： vue.js 百度 javascript

于 2023-04-22 15:19:51 首次发布

本文链接：https://blog.csdn.net/Holly31/article/details/130305189

版权

第三方插件专栏收录该内容

8 篇文章 1 订阅

订阅专栏

引入方式参考：百度地图离线地图实现绘制多边形及回显多边形区域_Holly31的博客-CSDN博客

红色编辑点：点击地图新增出来或者根据数据赋值过来，可拖拽或点击移动

ps:因为地图外层加了el-scrollbar，会干扰地图的缩放，所以自己写了个方法缩放

offlineMarke.vue

<template>
  <div class="markmap">
    <div :id="mapId" class="allmap" />
  </div>
</template>

<script>
export default {
  props: {
    canAddMarker: {
      type: Boolean,
      default: false,
    },
    searchKeyword: String,
    strokeColor: {
      type: String,
      default: "#2A8DFF",
    },
    path: {
      type: String,
      default:"",
    },
    markers: {
      type: Array,
      default:()=>[],
    },
    pcenter: {
      type: Object,
      default: () => ({
        lng: 114.97731018066408,
        lat: 25.8246784210205,
      }),
    },
  },
  components: {},

  data() {
    return {
      markersOverlay:[],
      mapId: "map" + new Date().getTime(),
      zoom: 13,
      center: {
        lng: 114.97731018066408,
        lat: 25.8246784210205,
      },
    };
  },
  watch: {
    searchKeyword: {
      handler(val) {
        if (val) {
          this.localSearchFun();
        }
      },
    },
    pcenter: {
      handler(val) {
         const point=new BMap.Point(val.lng,val.lat);
         this.map.setCenter(point, );
      },
    },
    markers: {
      handler(arr) {
        if(arr&&arr.length>0){
          if(this.markersOverlay&&this.markersOverlay.length>0){
            this.markersOverlay.forEach(item=>{
              this.map.removeOverlay( item);
            })
          }
          this.$nextTick(() => {
            arr.forEach(item=>{
            this.customMarkerOverlay(item);
          })
          },1000)
          
        }
      },
      deep: true,
      immediate:true
    },
    path: {
      handler(val,oldVal) {
        if (val) {
           this.$nextTick(() => {
            this.drawDefault(val);
          }, 1000);
        }
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    
  },
  created() {
     this.mapId = "map" + new Date().getTime();
  },
  mounted() {
    this.initMap();
  },

  methods: {
    //默认多边形
    drawDefault(points) {
      if (points) {
        let newPonits = [];
        let arr = points.split(";");
        arr.forEach((item) => {
          let itemArr = item.split(",");
          newPonits.push(new BMap.Point(itemArr[0], itemArr[1]));
        });
        const polygon = new BMap.Polygon(newPonits, {
          strokeColor: this.strokeColor,
          strokeWeight: 4,
          strokeOpacity: 1,
          fillColor: this.strokeColor,
          fillOpacity: 0.2,
        });
        this.map.removeOverlay(this.polygonOverlay);
        this.map.addOverlay(polygon);
        this.map.setCenter(newPonits[0]); 
        this.polygonOverlay=polygon;
      }
    },
    //地图初始化
    initMap() {
      const _this = this;
      const point = new BMap.Point(114.97731018066408, 25.8246784210205);
      _this.map = new BMap.Map(this.mapId, { enableMapClick: false,minZoom:4,maxZoom:19 }); // 创建Map实例,GL版命名空间为BMap(鼠标右键控制倾斜角度)
      _this.map.centerAndZoom(point, this.zoom); // 初始化地图,设置中心点坐标和地图级别
      /*  _this.map.enableScrollWheelZoom(true);  */ // 开启鼠标滚轮缩放
      _this.suofang();
      /*   _this.cerateMarker(point);   */

      this.map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}));//type:BMAP_NAVIGATION_CONTROL_ZOOM type:BMAP_NAVIGATION_CONTROL_SMALL,enableGeolocation:true
 
      this.map.addControl(new BMap.GeolocationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
    
      this.map.addEventListener("click", function (e) {
          _this.mapClickFun(e);
      });
    },
    /* 标记点 */
    createMarkerDOM(markerObj) {
      const img = document.createElement("img");
      img.style.height = "50px";
      img.style.width = "50px";
      img.src = markerObj.src;
      img.draggable = markerObj.dragging;
      return img;
    },
    customMarkerOverlay(markerObj) {
      const _this=this;
      let myIcon = new BMap.Icon(markerObj.icon, new BMap.Size(45, 45));
      let pt = new BMap.Point(markerObj.lng, markerObj.lat);
      var marker = new BMap.Marker(pt, {
        icon: myIcon,
        enableDragging: markerObj.dragging,
        oType:'marker',
       offset:markerObj.offset?new BMap.Size(...markerObj.offset):new BMap.Size(5,-17)
      });
      this.map.addOverlay(marker);
      this.markersOverlay.push(marker);
      // 绑定点击事件
      marker.addEventListener("click", function (e) {
        console.log("eeee", e);
      });
      //绑定拖拽事件
      marker.addEventListener("dragend", function (e) {
        _this.$emit("updateMarkerLocal", e.point);
      });
    },
    cerateMarker(point) {
      const marker = new BMap.Marker(point);
      // 将标记点添加到地图上
      this.map.addOverlay(marker);
    },
    handlerMap({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
    },
    //点击地图事件 增加标记点
    mapClickFun(ev) {
       
      if (this.canAddMarker) {
        this.$emit("updateMarkerLocal", ev.point);
      }
    },
    //缩放
    suofang() {
      document.querySelector(".markmap").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;
          }
        }
        this.map.setZoom(this.zoom);
      };
    },
    //拖拽标记
    markerDragendEvent(e) {
      const _this = this;
      _this.$emit("updateMarkerLocal", e.point);
    },
    //关键词搜索
    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);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.markmap {
  width: 800px;
  height: 500px;
  .allmap {
    width: 100%;
    height: 100%;
  }
}
</style>

页面使用

<template>
  <div class="">
    <offlineMarke
      ref="mydrawMap"
      class="mymap-wrap"
      :canAddMarker="canAddMarker"
      :path="path"
      :strokeColor="strokeColor"
      :pcenter="center"
      :markers="markers"
      @updateMarkerLocal="updateMarkerLocal"
    ></offlineMarke>
  </div>
</template>

<script>
import offlineMarke from "@/components/Map/offlineMarke";
export default {
  props: [],
  components: { offlineMarke },
  data() {
    return {
      canAddMarker: true,
      strokeColor: "#FF6B36",
      center:{
        lng: "114.933625",
          lat: "25.85190",
      },
      path: "114.92785540582945,25.83652466645269;114.92823026067752,25.847650021588933;114.93326455552047,25.84679557530646;114.94444120792562,25.847283346808027;114.94666935084885,25.846470393187857;114.94991319176417,25.844372292159633;114.9536417373817,25.840323628122093;114.95646285382479,25.83860005841268;114.96159150781574,25.83115605191992;114.96356808621543,25.824976622119365;114.9643227797862,25.82133385975571;114.9613758810813,25.81834150683285;114.9581414800636,25.816454984607688;114.95318206516998,25.81499128286883;114.950630482145,25.813495035728792;114.94502418704789,25.80816043559642;114.93953141347649,25.80412817087722;114.93648047520966,25.807707561717777;114.94762118982572,25.816164775470398;114.93985862738357,25.82410099603871;114.94194301915044,25.826117491923867;114.94172739241593,25.839321438580683;114.93834924024202,25.839256398119232;114.92785540582945,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: {
    updateMarkerLocal(point) {
        this.markers[1].lat=point.lat;
        this.markers[1].lng=point.lng;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>