Vue项目使用天地图自定义窗口InfoWindow类中单击事件指向vue函数的方法

1. 在mounted周期函数中定义window函数指向

  mounted() {
    window.chosenMap = this.chosenMap;    // 方法赋值给window
  }

2. 在method定义事件函数

chosenMap(lng, lat) {
    console.log('纬度', lng);
    console.log('经度', lat);
  }

3. 自定义一个地图标签窗口类InfoWindow

let infoWin = new T.InfoWindow();
      infoWin.setLngLat(new T.LngLat(lng, lat));
      let sContent = `<div style="margin-top:5px;font-size:1.1rem">${name}</div>
    	<div onClick="chosenMap('${lng}', '${lat}')" 
    	     style="margin-top:15px;
    	     font-size:0.6rem;
    	     color:#409EFF;
    	     cursor: pointer;">
            <span>选择这里</span>
        </div>`;
      infoWin.setContent(sContent);
      marker.openInfoWindow(infoWin);
      this.map.addOverLay(infoWin);

在<div onClick="chosenMap('${lng}', '${lat}')" 中通过原生JS的onClick点击事件指向mounted中定义好的window指向Vue中method的方法函数，即可完成与Vue中方法函数的关联，达到自定义触发事件的指向。

为什么要自定义点击事件？
因为天地图的开发文档中的InfoWindow类中没有click点击事件可以直接调用。

所以当需要在Vue中使用天地图并需要覆盖窗口中可以自定义点击事件的时候，可以通过指向问题解决调用Vue方法函数的问题。

效果图：

可通过点击选择这里触发Vue中的方法函数。