小编Alx*_*Red的帖子

这是我的第一个VueJS项目,我已经启动并运行了vue2-google-maps但是当我尝试将地图标记连接到我的网站的JSON提要(使用Wordpress REST API)时,我遇到了一个问题,Lat和Lng值返回undefined或NaN.

在进一步调查时(感谢下面的@QuỳnhNguyễn),似乎在数据准备好之前正在运行Google Maps实例.在初始化地图之前,我已经尝试过观看要加载的Feed,但它似乎不起作用.

标记位置使用JSON从WordPress REST API中提取并存在于数组(位置)中.该数组存在并填充在Vue Dev Tools(51条记录)中,但在检查已安装时,该数组为空.数据在创建阶段被拉入,所以我不知道为什么安装阶段不会准备好.

有问题的代码如下......

模板:

<template>
    <gmap-map v-if="feedLoaded" ref="map" :center="center" :zoom="zoom" :map-type-id="mapTypeId" :options="options">
        <gmap-marker 
            :key="index" v-for="(m, index) in locations" 
            :position="{ lat: parseFloat(m.place_latitude), lng: parseFloat(m.place_longitude) }" 
            @click="toggleInfoWindow(m,index)" 
            :icon="mapIconDestination">
        </gmap-marker>
        <gmap-info-window></gmap-info-window>
    </gmap-map>
</template>

脚本

<script>
    const axios = require('axios');
    const feedURL = "API_REF";

    export default {
        props: {
            centerRef: {
                type: Object,
                default: function() {
                    return { lat: -20.646378400026226, lng: 116.80669825605469 …