百度地图GL篇 三、添加点位

说明：添加点位两种方式

1.自己写点击地图添加标注点

2.根据百度地图提供辅助工具GL版实现点、线、圆、矩形、多边形（如下图）

3.点击地图添加marker

    createMarker() {

      let _this = this;

      if (this.clickMapFlag) {

        _this.map.on("click", function (e) {

          let point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);

          _this.clickMapFlag = false; //关闭点击

          _this.map.setDefaultCursor("pointer");

          const gc = new BMapGL.Geocoder();

          gc.getLocation(point, function (res) {

            if (paramObj.name == "") {

              paramObj.name = res.addressComponents.street;

              _this.diviceSave(param);//接口保存

            }

          });

        });

      }

    },

4.创建点位添加地图上

  this.pointAll.forEach((item) => {

        let point = new BMapGL.Point(item.longitude, item.latitude);

        let iconUrl = item.standby == "1" ? "/images/1.png" : item.standby == "2"? "/images/2.png" : item.standby == "3"? "/images/3.png" : item.standby == "4" ? "/images/4.png" : item.standby == "5" ? "/images/5.png" : "/images/1.png"; //根据类型展示不同图标

        let myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(24, 25), {

          anchor: new BMapGL.Size(20, 20),

        });

        var label = new BMapGL.Label(item.id);

        label.setStyle({ display: "none", color: "transparent", opacity: 0 });

        marker.setLabel(label);

        // 创建标注对象并添加到地图

        let marker = new BMapGL.Marker(point, { icon: myIcon });

        marker.type = "spot"; // 创建分类

        this.markersArr.push(marker);

        let that = this;

        if (that.pageType == 3) {

          marker.enableDragging();   进入页面实现拖拽编辑

        }

        this.map.addOverlay(marker);

      });

补充：编辑、完成需要改变手样式

1>设置鼠标样式为十字花样式

map.setDefaultCursor("crosshair");

//设置鼠标样式为手形

map.setDefaultCursor（“url('bird.cur')"）；

2>地址解析  参考百度地图类参考

new BMapGL.Geocoder()   //创建地址解析器实例

3>小细节：后期点击标注点获取不到标注点的id

 var label = new BMapGL.Label(item.id);

        label.setStyle({ display: "none", color: "transparent", opacity: 0 });

        marker.setLabel(label);