В Vue.js, как вызвать функцию из события клика Google Maps?

Question

Я использую Google Maps API в приложении nuxt в режиме SPA и хочу, чтобы из события щелчка gmap вызывал функцию в методах vue

Я попробовал обычный this.createInfoWindow (), но «this» - это не «VueComponent», а «Window».

В моем компоненте я инициализирую карты Google и добавляю событие click в смонтированном 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 из события click?

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)
  })