javascript - 将值从 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();
  }
};

..................................................... ..................................................... ..................................................... ..................................................... ……

问题：如何markers: [ {从data.php（lat、lng、lable）传输值？

标签： javascriptgoogle-mapsvue.jsvuejs2

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)
     }
    }))
  }
}

有几点需要纠正：

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

---

编辑：

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

修改后的 CodeSandbox