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

Question

我有一个 simple vue project .

我使用 vue2-google-maps 连接了一个谷歌地图.

和there is json file (or rather 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();
  }
};

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

问题:如何标记:[ { 从 data.php(lat、lng、lable)传输值？

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。

Revised CodeSandbox