百度地图一些用法

 主要实现地图突出某个区域，并实现该区域3d棱柱、添加点标记和文本标记，点击标记和鼠标移动到标记的事件

//引入库
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=XXXXXXXXXXX"></script>

   mapInit() {
      let BMapGL = window.BMapGL;
      this.map = new BMapGL.Map("map");
      var map = new BMapGL.Map("map");
      var point = new BMapGL.Point(118.330719, 33.744276); //中心点经纬度
      map.enableScrollWheelZoom();
      map.centerAndZoom(point, 12.5);
      map.setTilt(50); //倾斜角
      map.setMapStyleV2({ styleJson: this.mapstyle }); //个性化百度地图皮肤，去百度地图开发平台下载想要的js样式文件
      var bd = new BMapGL.Boundary(); 
      // 给某一个省 市 县 设置3d棱柱
      bd.get("XX区", function (rs) {
        var count = rs.boundaries.length; // 行政区域的点有多少个
        for (var i = 0; i < count; i++) {
          var path = [];
          var str = rs.boundaries[i].replace(" ", "");
          var points = str.split(";");
          for (var j = 0; j < points.length; j++) {
            var lng = points[j].split(",")[0];
            var lat = points[j].split(",")[1];
            path.push(new BMapGL.Point(lng, lat));
          }
          //区域掩膜
          var mapmask = new BMapGL.MapMask(path, {
            isBuildingMask: false,// 楼块是否参与掩膜
            isPoiMask: true, //底图上的Poi是否参与掩膜，默认为false
            isMapMask: false,//底图是否参与掩膜，默认为false
            showRegion: "inside",// 显示区域范围以内部分
            topFillColor: "#5679ea",
            topFillOpacity: 0.6,
            sideFillColor: "#5679ea",
            sideFillOpacity: 0.9,
          });
          map.addOverlay(mapmask);
          // 绘制线条 
          var border = new BMapGL.Polyline(path, {
            strokeColor: "#3ebffe",
            strokeWeight: 2,
            strokeOpacity: 1,
          });
          map.addOverlay(border);
          // 3D棱柱
          var prism = new BMapGL.Prism(path, 1000, {
            topFillColor: "#022565",
            topFillOpacity: 0.5,
            sideFillColor: "#022565",
            sideFillOpacity: 1,
          });
          map.addOverlay(prism);
        }
      });   
      this.mapList.forEach((item) => {
        let myIcon = "";
        if (item.status == 2) { //根据状态不同展示不同标记点
          myIcon = new BMapGL.Icon(
            require("@/assets/yj.png"),
            new BMapGL.Size(22, 22)
          );
        } else {
          myIcon = new BMapGL.Icon(
            require("@/assets/wj.png"),
            new BMapGL.Size(22, 22)
          );
        }
        var pt = new BMapGL.Point(item.jd, item.wd); // 创建标注点
        var marker = new BMapGL.Marker(pt, {
          icon: myIcon,
        });
        var label = new BMapGL.Label(item.realEstateName, { // 创建文本标注
          position: pt,
          offset: new BMapGL.Size(-20, 10)// 设置文本偏移量,文案位移的位置 左右/上下
       })  
        label.setStyle({ // 设置label的样式
            color: '#fff',
            fontSize: '12px',
            background :'none',
            border :'none',
        })
        // 将标注添加到地图
        map.addOverlay(marker);
        this.markTap(marker, item);
        // 鼠标移到点标记和离开点标记时发生的事件
        var moveEvts = ["mouseover", "mouseout"];
        moveEvts.forEach((val) => {
          let _this = this;
          marker.addEventListener(val, function () {
            if (val == "mouseover") {
              _this.curPoint = item;
              _this.showPop = true;
            } else {
              _this.curPoint = {};
              _this.showPop = false;
            }
          });
        });
        //地图缩放
        map.addEventListener("zoomend", function(){
          var ZoomNum = map.getZoom();
          if(ZoomNum >15){
            map.addOverlay(label); //添加label
          } else{
            map.removeOverlay(label) //移除label
          }
        });
        //地图拖拽
        map.addEventListener("dragend", function(){
        //地图拖拽结束后执行的代码

        });
      });
    },
    // 点击事件(点击地图上的marker点标记)
    markTap(marker, m) {
      let _this = this;
      marker.addEventListener("click", function () {
         //点击后需要做的事
      });
    },