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

Question

I'm using Google Maps API in a Nuxt.js app in SPA mode and I want, from the gmap click event, to call a function in the Vue.js methods

I tried the usual this.createInfoWindow() , but this is not the VueComponent , it's the Window .

In my component I initialize the google maps and add the click event in the vue mounted:

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

And in the vue methods, I have the function:

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

Everything seems to be working, except the function call: this.createInfoWindow(e.latLng)

How can I call the function createInfoWindow from the click event?

Answer 1

As you stated, this does not refer to your Vue instance inside the click handler. Use a closure.

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

Answer 2

"this" is not accessed within the listener function, hence the existence of "this.createInfoWindow" is not known. A closure helps you capture and store "this" for use in the scope of the child function (the listener function in this problem), hence Steve's solution works