javascript - Vuejs 生命周期问题，仅在 Webpack 加载器刷新页面上的元素后才填充数据数组？谷歌地图标记不显示？

Question

我是 vueJS 的新手，我正在制作一个应用程序，我可以在其中绘制位置，并让它们显示在谷歌地图元素上。我的代码真的很 hacky，但我正在尝试通过制作东西来学习。谢谢你的帮助。

上下文

我目前有一个鹅对象数组:

[
    {
        "id": 74,
        "created_at": "Jan 14 08:24:46 PM",
        "latitude": "<a coord near me>",
        "longitude": "<a coord near me>"
    },
    {
        "id": 73,
        "created_at": "Jan 14 06:56:33 PM",
        "latitude": "<a coord near me>",
        "longitude": "<a coord near me>"
    }
]

我想做什么

我正在尝试将这个鹅对象数组转换为另一个标记数组，其中包含只有纬度/经度的位置对象，我可以将其传递到谷歌地图并显示标记。

问题

map 正在显示，获取当前位置 + 居中工作正常。

出于某种原因，只有当我的 webpack 加载程序重新加载页面上的元素时，我的标记数组才会被填充(例如，如果我在我的“getMarkers()”方法中随机生成一个 console.log 语句。它不会被填充当页面最初加载时正确。我尝试查看 vue 的生命周期文档，但无法让它工作。

此外，当标记正确加载时(使用 vue devtools chrome 扩展程序检查)，它们仍然不会在应用程序中显示为标记(但是当我使用 vue devtools 手动输入 mock coors 时，它们会出现吗？)。

我的代码

<template>
  <div>
    <gmap-map :center="this.center" :zoom="15" style="width:100%;  height: 400px;">
      <gmap-marker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>
<script>
export default {
  name: "GoogleMap",
  props: {
    geese: Array
  },
  data() {
    return {
      markers: [],
      center: {}
    };
  },
  methods: {
    geolocate() {
      navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
      });
    },
    getMarkers() {
      console.log("in getMarkers")
      for (var goose of this.geese) {
        console.log("got into for loop of geese")
        console.log("dsdfss")
        const marker = {
          lat: parseFloat(goose.latitude),
          lng: parseFloat(goose.longitude)
        };
        this.markers.push({ position: marker });
      }
    }
  },
  mounted() {
    this.geolocate();
    this.getMarkers()
  }
};
</script>

再次感谢您的帮助。

Answer 1

已解决问题!

我挂载的代码是这样的:

mounted() {
  document.onreadystatechange = () => {
     if (document.readyState == "complete") {
       console.log('Page completed')
       this.getMarkers()
     }
   }
}

我还把“this.geolocate()”放入创建