在vue中为高德infoWindow添加点击事件

在地图上的InfoWindow添加点击事件。

渲染marker与infowindow

loadMarker(){
    //模拟marker
    const markerList = [
      {
        name: 'A',
        pos: [121.902055, 30.861752]
      }, {
        name: 'B',
        pos: [121.340282, 31.190927]
      },
    ]
    //生成infoWindow对象,infoWindow在data内命名了
    this.infoWindow = new this.AMap.InfoWindow({
        offset: new AMap.Pixel(0, -30),
      })
    //自定义marker的icon
    const icon = new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(64, 64),
          // 图标的取图地址
          image: require('src/assets/marker.png'),
          // 图标所用图片大小
          imageSize: new AMap.Size(32, 32),
          // 图标取图偏移量
          imageOffset: new AMap.Pixel(0, 0)
    })
    //遍历markerList，进行渲染marker
    markerList.forEach((i)=>{
        let marker = new AMap.Marker({
              position: i.pos,
              id: i.name,//写入需要用到的参数
              icon: icon,//这里是地图的icon,需要自己配置
              zIndex: 100
            });
            //构造点击marker展示的内容-绑定每个点击对象,注意类名为`detailBtn`
            const markerContent = `
              <div class="p-marker-info">
                <div class="info-item">
                  <label>库存名称:</label>
                  <span>${i.name}</span>
                <div class="info-item">
                  <label class="detailBtn" comId=`+company.id+`>查看详情</label>
                </div>
              </div>
            `;
    })
    
    marker.infoWindow = markerContent//把infoWindow绑定给marker
    //绑定点击事件，在点击的时候给infowindow绑定点击事件，因为只有点击之后才会生成infoWindow这个dom
    marker.on('click', (e) => {
      this.mapEleClick(marker)
    })
    
}

绑定infoWIndow的点击

//marker的点击事件
  mapEleClick (marker) {
    //点击显示弹窗
    this.infoWindow.setContent(marker.infoWindow);
    this.infoWindow.open(this.map, marker.getPosition())
    //绑定InfoWindow的点击事件,给个定时器，确定infoWindwo有了之后进行绑定
    setTimeout(_=>{
      this.bindWindowClick()
    },500)
  },
  
  bindWindowClick() {
      /**********************infoWindow的点击事件***********************/
      //因为只有点击了Marker之后才会生成infoWindow,所以才进行绑定
      //原生javascript方法走起
      const windowDomList = document.querySelectorAll('.detailBtn')
      windowDomList.forEach(i=>{
        i.onclick = (e)=>{
          const id =e.target.getAttribute('comId')
          //在这里做点击的操作
        }
      })
    }

总结：

• 给每一个infoWindow加上一个类名，然后进行绑定事件
• 高德地图infoWindow不会马上就渲染出来，只有点击marker之后才会生成
• 所以需要在生成infoWindow后才能绑定事件

链接：https://juejin.cn/post/6901591997870505997