Vue.js Map组件currentLocation赋值后外部无法访问的问题求助

你遇到的问题本质是异步操作的执行顺序问题——navigator.geolocation.getCurrentPosition是一个异步API，它不会阻塞代码执行。当你在initializeMap里调用updateCurrentPosition后，JavaScript会立刻继续执行后续的console.log和addMarker，但此时地理定位的回调函数还没触发，currentLocation自然还是初始的空对象。

下面给你两种可行的解决方案：

方案一：在异步回调中直接触发后续操作 #

最简单的方式是把依赖currentLocation的逻辑（比如addMarker）放在getCurrentPosition的回调函数里，确保只有当定位完成、currentLocation被赋值后才执行这些操作：

<template>
  <div>
    <div class="google-map" :id="mapName"></div>
  </div>
</template>
<script>
export default {
  name: 'google-map',
  props: ['name'],
  methods:{
    updateCurrentPosition(){
      navigator.geolocation.getCurrentPosition((position) => {
        // 注意：Vue中直接用this.currentLocation即可，无需this.$data
        this.currentLocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        console.log("After setting, currentLocation = ", this.currentLocation);
        this.map.panTo(new google.maps.LatLng(this.currentLocation.lat, this.currentLocation.lng));
        this.map.setZoom(18);
        // 定位完成后再调用addMarker
        this.addMarker(this.currentLocation);
      });
    },
    initializeMap(){
      this.updateCurrentPosition();
      // 这里不再直接调用addMarker，因为它依赖异步的定位结果
      console.log("这行代码会在地理定位完成前执行");
    },
    addMarker(LatLngObj){
      console.log("In addMarker currentLocation = ", this.currentLocation);
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(LatLngObj.lat, LatLngObj.lng),
        map: this.map,
        icon:'http://www.magic-emoji.com/emoji/images/619_emoji_iphone_ok_hand_sign.png'
      });
    }
  },
  data: function () {
    return {
      mapName: this.name + "-map",
      markerCoordinates: [{ latitude: 51.501527, longitude: -0.1921837 }, { latitude: 51.505874, longitude: -0.1838486 }, { latitude: 51.4998973, longitude: -0.202432 }],
      map: null,
      bounds: null,
      markers: [],
      currentLocation:{}
    }
  },
}
</script>

方案二：用Promise封装+async/await（更清晰的异步流程） #

如果你的业务逻辑更复杂，需要多个异步操作配合，推荐用Promise封装地理定位API，再结合async/await让异步代码看起来像同步代码：

<template>
  <div>
    <div class="google-map" :id="mapName"></div>
  </div>
</template>
<script>
export default {
  name: 'google-map',
  props: ['name'],
  methods:{
    // 把地理定位封装成Promise
    getCurrentPosition() {
      return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(resolve, reject);
      });
    },
    async updateCurrentPosition(){
      try {
        // 等待地理定位完成
        const position = await this.getCurrentPosition();
        this.currentLocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        console.log("After setting, currentLocation = ", this.currentLocation);
        this.map.panTo(new google.maps.LatLng(this.currentLocation.lat, this.currentLocation.lng));
        this.map.setZoom(18);
        // 返回定位结果，供后续使用
        return this.currentLocation;
      } catch (error) {
        console.error("获取定位失败:", error);
      }
    },
    async initializeMap(){
      // 等待updateCurrentPosition完成
      const location = await this.updateCurrentPosition();
      if (location) {
        console.log("Before Marker, currentLocation = ", this.currentLocation);
        this.addMarker(this.currentLocation);
      }
    },
    addMarker(LatLngObj){
      console.log("In addMarker currentLocation = ", this.currentLocation);
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(LatLngObj.lat, LatLngObj.lng),
        map: this.map,
        icon:'http://www.magic-emoji.com/emoji/images/619_emoji_iphone_ok_hand_sign.png'
      });
    }
  },
  data: function () {
    return {
      mapName: this.name + "-map",
      markerCoordinates: [{ latitude: 51.501527, longitude: -0.1921837 }, { latitude: 51.505874, longitude: -0.1838486 }, { latitude: 51.4998973, longitude: -0.202432 }],
      map: null,
      bounds: null,
      markers: [],
      currentLocation:{}
    }
  },
}
</script>

额外提示 #

在Vue中，访问data里的属性不需要通过this.$data，直接使用this.currentLocation即可——Vue已经对data属性做了代理，这样写更简洁易读。

内容的提问来源于stack exchange，提问作者user5381829