Google Maps点击事件无法读取Vue data对象，需实现地址数据持久化

Hey there, I see you're having trouble accessing your Vue instance's data properties (specifically the station object) when handling Google Maps click events. Let's break down why this happens and how to fix it so you can save the latitude, longitude, and formatted address correctly.

The Root Cause #

The issue boils down to this context inside the Google Maps event callback. When you use a regular function for the click listener, this refers to the Google Maps object itself—not your Vue instance. That's why you can't access this.station directly.

Solution 1: Use Arrow Functions (My Go-To!) #

Arrow functions inherit the this context from their surrounding scope (which will be your Vue instance here). Here's how to adjust your mounted code:

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);
  const geocoder = new google.maps.Geocoder(); // Initialize Geocoder for address lookup

  // Use arrow function to preserve Vue's `this` context
  map.addListener('click', (event) => {
    const lat = event.latLng.lat();
    const lng = event.latLng.lng();

    // Fetch formatted address via Google Geocoder API
    geocoder.geocode({ location: event.latLng }, (results, status) => {
      if (status === 'OK' && results[0]) {
        const formattedAddress = results[0].formatted_address;
        
        // Now you can safely update your Vue data!
        this.station = {
          latitude: lat,
          longitude: lng,
          formattedAddress: formattedAddress
        };

        // Optional: Update your other data properties if needed
        this.lat = lat;
        this.lng = lng;
        this.Fulladdress = formattedAddress;
      } else {
        console.error('Geocode lookup failed: ', status);
      }
    });
  });
}

Solution 2: Store Vue Instance Reference in a Variable #

If you prefer not to use arrow functions, you can save a reference to your Vue instance before the callback:

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);
  const geocoder = new google.maps.Geocoder();
  const vm = this; // Save Vue instance reference to use inside callbacks

  map.addListener('click', function(event) {
    const lat = event.latLng.lat();
    const lng = event.latLng.lng();

    geocoder.geocode({ location: event.latLng }, function(results, status) {
      if (status === 'OK' && results[0]) {
        const formattedAddress = results[0].formatted_address;
        // Use `vm` instead of `this` to access Vue's data properties
        vm.station = {
          latitude: lat,
          longitude: lng,
          formattedAddress: formattedAddress
        };
        vm.lat = lat;
        vm.lng = lng;
        vm.Fulladdress = formattedAddress;
      }
    });
  });
}

Quick Notes to Keep in Mind #

• Make sure you've included the Geocoder library in your Google Maps script URL (add &libraries=geocode to the end of the URL) to use the address lookup feature.
• We're directly populating the station object with all required data, which aligns with your goal to persist everything in that object.
• Always check the Geocoder status to handle cases where the address lookup fails (like in remote areas with no mapped addresses).

内容的提问来源于stack exchange，提问作者G.oumayma