这是我的第一个VueJS项目，我已经启动并运行了 vue2-google-maps ，但是当我尝试将地图标记连接到网站的JSON feed时遇到了一个问题（使用Wordpress REST API）， Lat 和 Lng 值返回 undefined 或 NaN 。
在进一步调查中（由于下面的@QuỳnhNguyễn），似乎在数据准备就绪之前正在运行Google Maps实例。我已经尝试过在初始化地图之前查看要加载的供稿，但是它似乎不起作用。
标记位置使用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 }
}
},
zoomVal: {
type: Number,
default: function() {
return 11
}
}
},
data: function() {
return {
feedLoaded: false,
zoom: this.zoomVal,
center: this.centerRef,
options: {
mapTypeControl: false,
streetViewControl: false,
},
mapTypeId: 'styledMapType',
mapIconDestination: '/images/map-pin_destination.png',
mapIconActivity: '/images/map-pin_activity.png',
mapIconAccommodation: '/images/map-pin_accommodation.png',
mapIconEvent: '/images/map-pin_event.png',
mapIconBusiness: '/images/map-pin_business.png',
locations: [],
markers: []
}
},
created: function() {
this.getData();
},
mounted: function() {
this.$nextTick(() => {
this.$refs.karrathaMap.$mapPromise.then((map) => {
var styledMapType = new google.maps.StyledMapType(
[...MAP_STYLE SETTINGS...]
)
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
})
});
},
watch: {
feedLoaded: function() {
if (this.feedLoaded == true) {
console.log(JSON.stringify(this.locations))
}
}
},
methods: {
getData() {
const url = feedURL;
axios
.get(url)
.then((response) => {this.locations = response.data;})
.then(this.feedLoaded = true)
.catch( error => { console.log(error); }
);
}
}
}
</script>
答案 0 :(得分：4)
事实证明，问题出在数据不干净。
JSON响应包含了不应包含在地图上的位置，因此尽管我将Feed设置为仅返回包含以下内容的数据，但每次遇到不包含ACF字段的条目均会失败在地图上是真的。
我已经解决了此问题，方法是在Feed加载后处理数据，并使用有效数据从中创建一个新的数组（标记），然后使用它而不是原始（位置）数组将标记放置在地图。
清理数据：
watch: {
feedLoaded: function() {
if (this.feedLoaded == true) {
var LocationList = this.locations;
for (var i = 0; i < LocationList.length; i++) {
var includeOnMap = LocationList[i].acf['place_include-on-map'];
if (includeOnMap === true) {
var placeName = LocationList[i].title.rendered;
var placeDescription = LocationList[i].acf['place_short-description'];
var placeLatitude = LocationList[i].acf['place_latitude'];
var placeLongitude = LocationList[i].acf['place_longitude'];
var placeIcon = this.mapIconDestination;
this.markers.push({ name: placeName, lat: placeLatitude, lng: placeLongitude, icon: placeIcon });
}
}
}
}
}
然后是 gmap组件：
<gmap-map ref="karrathaMap" :center="center" :zoom="zoom" :map-type-id="mapTypeId" :options="options">
<gmap-marker v-if="feedLoaded == true" :key="index" v-for="(m, index) in markers" :position="{ lat: parseFloat(m.lat), lng: parseFloat(m.lng) }" @click="toggleInfoWindow(m,index)" :icon="m.icon"></gmap-marker>
<gmap-info-window></gmap-info-window>
</gmap-map>
感谢所有为帮助我深入探讨问题做出贡献的人。现在，我将花一些时间重新考虑数据的结构。
答案 1 :(得分：3)
它似乎与数据格式有关。根据{{3}}中的vue-devtools，您的数据以以下格式从WordPress REST API返回：
[
{
"acf": {
"place_latitude": "-22.695754",
"place_longitude": "118.269081",
"place_short-description": "Karijini National Park"
},
"id": 12,
"parent": 10,
"title": {
"rendered": "Karijini National Park"
}
},
...
]
有了locations数组的初始化方式（getData方法），可以像这样传递position属性：
<gmap-marker
:key="index"
v-for="(m, index) in locations"
:position="{ lat: parseFloat(m.acf.place_latitude), lng: parseFloat(m.acf.place_longitude) }"
></gmap-marker>
答案 2 :(得分：0)
vuejs在元素上支持v-if指令。我建议您尝试使用以下代码段。
<template>
<div id="map" v-if="loaded">
<gmap-map 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>
</div>
</template>
<script>
export default {
data() {
return {
loaded: false
}
},
beforeMount: function () {
const url = feedURL;
axios
.get(url)
.then((response) => {
this.locations = response.data;
//activate element after api call response recieved
this.loaded = true
})
.catch(error => {
console.log(error);
}
);
}
}
</script>