google 地图点击事件未从数据中读取对象

Question

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

中

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

      });

  }

Answer 1

上下文正在发生变化。在点击处理程序中，this 不是指 Vue 实例，而是其他东西（这取决于 google 地图是如何做到的，但它可能是 window 或地图实例） .

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

更改自：

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

收件人：

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

google 地图点击事件未从数据中读取对象

google maps click event isn't reading objects from data

google-maps

event-listener

vue.js