vue+百度地圖 添加多個(gè)坐標(biāo)并實(shí)現(xiàn)點(diǎn)擊坐標(biāo)顯示信息窗

// 添加標(biāo)記點(diǎn)
    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); // 創(chuàng)建標(biāo)注
            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
          ); //循環(huán)生成新的地圖點(diǎn)
          
          var markers= new BMapGL.Marker(points[i], { icon: greeicon }); //按照地圖點(diǎn)坐標(biāo)生成標(biāo)記
          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); //跳動(dòng)的動(dòng)畫
        }
      }
    },
    // 點(diǎn)擊標(biāo)記點(diǎn)
    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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容