使用vue2-google-maps时，如何禁用Google Maps API的可点击地标？

我之前也遇到过一模一样的问题！vue2-google-maps这个包确实没把clickableIcons做成直接可绑定的Props，所以你直接在<GmapMap>上添加:clickableIcons="false"不会有效果——因为组件根本没监听这个属性，自然不会把它传递给原生的Google Maps实例。

不过咱们可以绕个弯，通过获取原生地图实例来手动修改这个配置，有两种靠谱的方法：

方法1：利用组件的ready事件获取实例 #

组件初始化完成后会触发ready事件，参数就是原生的Google Maps实例，我们可以直接在这个事件里设置属性：

<GmapMap 
  ref="mapRef" 
  @click='createMarker' 
  :center="center" 
  :zoom="zoom" 
  :map-type-id="map" 
  style="width: 100%; height: 800px"
  @ready="handleMapReady"
> 
</GmapMap>

然后在你的Vue组件的methods里添加处理函数：

methods: {
  handleMapReady(mapInstance) {
    // 直接给原生地图实例设置clickableIcons为false
    mapInstance.setOptions({ clickableIcons: false });
  }
}

方法2：通过ref获取实例（适合在生命周期钩子中设置） #

如果需要在组件挂载后或者其他时机修改，可以通过组件的$mapObject属性拿到原生实例（这个是vue2-google-maps内部暴露的原生实例引用）：

mounted() {
  // 用$nextTick确保地图已经完全初始化
  this.$nextTick(() => {
    const nativeMap = this.$refs.mapRef.$mapObject;
    if (nativeMap) {
      nativeMap.setOptions({ clickableIcons: false });
    }
  });
}

原理很简单：vue2-google-maps只是对原生Google Maps API的一层封装，很多底层配置并没有全部做成Props暴露出来，这时候直接操作原生实例就能解决这类问题啦。

内容的提问来源于stack exchange，提问作者Onyx