vue+百度地图 添加多个坐标并实现点击坐标显示信息窗

// 添加标记点
    addMarker() {
      if (this.markerArr.length > 0) {
        this.map.clearOverlays();
        var markers = [];
        var points = [];
        // let info = [];
        // this.markerArr.forEach(function(){
        for (var i = 0; i < this.markerArr.length; i++) {
          if (i == 0) {
            var pointes = new BMapGL.Point(
              this.markerArr[0].p0,
              this.markerArr[0].p1
            );
            var marker = new BMapGL.Marker(pointes); // 创建标注
            this.map.centerAndZoom(pointes, this.bigsize);
            // this.map.addOverlay(marker)
          }
          var iconNum;
          switch (this.markerArr[i].type) {
            case 0:
              iconNum = 0;
              break;
            case 2:
              iconNum = 1;
              break;
            case 4:
              iconNum = 2;
              break;
            case 6:
              iconNum = 3;
              break;
            case 8:
              iconNum = 4;
              break;
            case 10:
              iconNum = 0;
              break;
            default:
              break;
          }
          var greeicon = new BMapGL.Icon(
            this.mapicon[iconNum].icon,
            new BMapGL.Size(50, 50)
          );
          points[i] = new BMapGL.Point(
            this.markerArr[i].p0,
            this.markerArr[i].p1
          ); //循环生成新的地图点
          
          var markers= new BMapGL.Marker(points[i], { icon: greeicon }); //按照地图点坐标生成标记
          console.log(this.markerArr[i], "markers");
          
           var content =`<div style='width:100%;'><div style='width:90%;margin:0 auto;'>` +
              `<div><span>站名:</span>` +
              this.markerArr[i].stationName +
              `</div><div><span>水位:</span>` +
              this.markerArr[i].water +
              `</div><div><span>流量:</span>`;
              var t1 = this.markerArr[i].stationName ;
              this.infotilte.push(t1);
              this.brokenInfo(markers,content);
          this.map.addOverlay(markers);
          markers.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        }
      }
    },
    // 点击标记点
    brokenInfo(marker,content) {
     var infoWindow = new BMapGL.InfoWindow(content, this.opts);
        marker.onclick=function(){
            marker.openInfoWindow(infoWindow);
        }

    },

原文链接:https://blog.csdn.net/qq_22899047/article/details/83186022

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容