zl程序教程

您现在的位置是:首页 >  其他

当前栏目

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

2023-02-25 18:19:44 时间

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>
            `;