谷歌地图点击事件没有从数据中读取对象答案

【问题标题】：google maps click event isn't reading objects from data谷歌地图点击事件没有从数据中读取对象
【发布时间】：2018-04-15 15:45:17
【问题描述】：

我试图通过点击地图来获取纬度和经度，然后我使用它们从谷歌地图 API 获取格式化地址，最后我想在数据中声明的对象“站”中保留纬度、经度和格式化地址

data() {
    return {
        station: {},
        mapName: this.name + "-map",
        lat: Number,
        lng: Number,
        Fulladdress: String
    };
}  ,  
mounted() {
    const element = document.getElementById(this.mapName);
    const options = {
      zoom: 14,
      center: new google.maps.LatLng(51.501527, -0.1921837)
    };
    const map = new google.maps.Map(element, options);

    google.maps.event.addListener(map, "click", function(event) {
      this.lat = event.latLng.lat();
      this.lng = event.latLng.lng();

      axios
        .get(
          "https://maps.googleapis.com/maps/api/geocode/json?latlng=" +
            this.lat +
            "," +
            this.lng +
            "&key=APIKEY"
        )
        .then(resp => {
          var fulladdress;
          console.log(resp.data.results[0].formatted_address);
          fulladdress = resp.data.results[0].formatted_address;
          this.Fulladdress = fulladdress;

        //persist lat, lng and formatted address in my object station 
        this.station.address = this.Fulladdress;
        this.station.lat = this.lat;
        this.station.lng = this.lng;

        })
        .catch(e => {
          console.log(e);
        });

      });

  }

【问题讨论】：

标签： google-maps vue.js event-listener

【解决方案1】：

环境正在改变。在点击处理程序中，this 不是指 Vue 实例，而是指其他东西（这取决于谷歌地图是如何做到的，但它可能是 window 或地图实例）。

要让this 成为 Vue 实例，请改用箭头函数。

更改自：

google.maps.event.addListener(map, "click", function(event) {

收件人：

google.maps.event.addListener(map, "click", (event)  => {

【讨论】：