在 Vue.js 中，如何从谷歌地图点击事件调用函数？

Question

我在 SPA 模式的 Nuxt.js 应用程序中使用 Google Maps API，我想从 gmap 单击事件中调用 Vue.js 方法中的函数

我尝试了通常的this.createInfoWindow()，但this不是VueComponent，而是Window。

在我的组件中，我初始化了谷歌地图并在安装的 vue 中添加了点击事件：

async mounted() {
  // Map initalization
  const google = await gmapsInit()
  this.map = new google.maps.Map(
    document.getElementById('g-map'),
    this.mapOptions
  )
  // Add click event
  google.maps.event.addListener(this.map, 'click', e => {
    // function call not working
    this.createInfoWindow(e.latLng)
  })
}

在 vue 方法中，我有以下功能：

methods: {
  async createInfoWindow(latLng) {
    const google = await gmapsInit()
    const infoWindow = new google.maps.InfoWindow({
      content: 'InfoWindow',
      position: latLng
    })
    infoWindow.open(this.map)
  }
}

一切似乎都在工作，除了函数调用： this.createInfoWindow(e.latLng)

如何createInfoWindow从单击事件调用该函数？

Answer 1

正如您所说，this在单击处理程序中不引用您的 Vue 实例。使用闭包。

  // Add click event
  const that = this
  google.maps.event.addListener(this.map, 'click', e => {
    // function call not working
    that.createInfoWindow(e.latLng)
  })