Блог

Я использую API Карт Google в Nuxt.js приложение в режиме SPA, и я хочу, чтобы из события gmap click вызывалась функция в Vue.js методы

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

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

Как вы заявили, this не ссылается на ваш экземпляр Vue внутри обработчика щелчков. Используйте замыкание.

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