高德地图不同层级是否显示文字记录

tianyawhl

发布于 2023-01-15 09:43:42

4640

发布于 2023-01-15 09:43:42

data中设置变量 isShowLabel? ??isShowLabel:"none", ?// "none":不显示 ?"block":显示

mounted中执行handleMoveEnd事件,一般地图展示后执行使用setTimeout
    handleMoveEnd(){
      console.log(this.GDMap.getZoom())
      this.GDMap.on("zoomend",()=>{
        console.log("zoomend")
        let zoom = this.GDMap.getZoom()
        if(zoom>11){
          if(this.isShowLabel=="none"){
             this.showMarkerLabel()
          }
        }else{
          if(this.isShowLabel=="block"){
            this.hideMarkerLabel()
          }
        }        
      })
    },

    showMarkerLabel(){
      this.isShowLabel = "block"
      this.showSiteMarker()
      return  // 下面层级放大时候标签不在视线区域的会偏移，未找到原因，所以改成重新画点
      for(let i=0;i<this.siteMarkers.length;i++){
        let label = this.siteMarkers[i].getLabel()
        console.log(label)
        console.log(label.direction)
        let labelContent = label.content.replace("none","block")
        this.isShowLabel = "block"
        // setTimeout(() => {
          this.siteMarkers[i].setLabel({
            // direction:label.direction,
            direction:"right",
            content:labelContent
          })
          this.siteMarkers[i].on("mouseout", () => {
              console.log("moveout")
              this.siteMarkers[i].setLabel({
                direction:label.direction,
                content: labelContent
              });
          });          
        // }, 1000);


      }
    },

为Marker设置Label

          let labelContentTitle = `
              <div class="mapLabel" style="display:${this.isShowLabel}">
                 <div class="labelTitle controlShow">${resultList[j].title}</div>
              </div>
            `;

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-01-15，如有侵权请联系 cloudcommunity@tencent.com 删除

block