将值从 json 文件传输到 vue2 谷歌地图标记

Question

我有一个简单的vue项目。

有一个谷歌地图，我使用vue2-google-maps连接。

并且有json文件(或者更确切地说是data.php(：

{
"locations": [
{
"name": "Location 1",
"adress": "215 West Girard Avenue 19123",
"location": {
"lat": "39.9695601",
"lon": "-75.1395161"
},
"lable": "200",
"prev": "img-1.png"
},
{ ...

文件GoogleMap.vue -->模板：

<template>  
<div class="container">    
<gmap-map id="map" v-bind="options">
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
:label="m.label"
@click="openWindow"
/>
<gmap-info-window 
@closeclick="window_open=false" 
:opened="window_open" 
:position="infowindow"
:options="{
pixelOffset: {
width: 0,
height: 0
}
}"
>
Hello world!
</gmap-info-window> 
</gmap-map>
</div>  
</template>

文件GoogleMap.vue --> 脚本：

import { gmapApi } from "vue2-google-maps";
export default {
name: "GoogleMap",
data() {
return {
//map: null,
options: {
zoom: 12,
center: {
lat: 39.9995601,
lng: -75.1395161
},
mapTypeId: "roadmap"
},
markers: [
{
label: "200",
position: { lat: 39.9695601, lng: -75.1395161 }
},
{
label: "30",
position: { lat: 40.034038, lng: -75.145223 }
},
{
label: "45",
position: { lat: 39.9713524, lng: -75.159036 }
}
],
info_marker: null,
infowindow: {
lat: 39.9995601,
lng: -75.1395161
},
window_open: false
};
},
computed: {
google: gmapApi
},
watch: {},
methods: {
initialize() {
console.log("init");
},
openWindow() {
console.log(this);
this.window_open = true;
}
},
mounted: function() {
this.initialize();
}
};

....................................

问题：如何从数据.php(纬度、液化天然气、标签(markers: [ {转移值？

Answer 1

像这样导入 JSON 文件：

import { default as locations } from '/path/to/json/file.json`

然后，可以创建markers计算属性：

computed: {
markers() {
return locations.map(({ label, location: { lat, lon }}) => ({
label,
position: {
lat: Number.parseFloat(lat),
lng: Number.parseFloat(lon)
}
}))
}
}

有几点需要纠正：

• JSON 文件中address拼写错误。
• JSON 文件中label拼写错误。

<小时 />

编辑：

如果使用php文件，显然您需要使用JSON.parse.

修订版代码沙盒