如何从传单中的 api 生成标记？

Question

我正在使用 vue 和传单制作应用程序，我需要从和 API 生成标记。但出于某种原因，只显示默认标记。我可以访问 DOM 中的 api 数据。我只是不知道如何迭代它并在 DOM 上显示数据。请帮忙

这是代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.12/vue.js"></script>
<template>
  <div class="containerTest">
    <div style="height: 80vh">
    <LMap :zoom="zoom" :center="center">
      <LTileLayer :url="url"></LTileLayer>
      <l-marker
        :key="index"
        v-for="(brew, index) in markers"
          :lat-lng="latLng(brew.latitude, brew.longitude)"
      ></l-marker>
      <!-- <LMarker :lat-lng="[47.413220, -1.219482]"></LMarker>
      <LMarker :lat-lng="[46.193220, 4.82]"></LMarker>
      <LMarker :lat-lng="[45.193220, 6.82]"></LMarker>
      <LMarker :lat-lng="[47.03220, -0.9482]"></LMarker>
      <LMarker :lat-lng="[46.03220, 2.9482]"></LMarker> -->
    </LMap>
  </div>
  </div>

</template>
      
<script>

import { LMap, LTileLayer, LMarker } from "vue2-leaflet";

export default {
  name: "Map",
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data() {
    return {
      markers: [],
      url: "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=CFmlXsYmVozAdWKEtdT5",
      zoom: 6,
      center: [46.5322, 2.9482],
      bounds: null
    };
  },
  mounted: function () {
    fetch('https://api.openbrewerydb.org/breweries').then((response) => {
      return response.json();
    }).then(json=>{
        this.brews = json
        console.log(this.brews)
    })
  },
  methods: {
    latLng: function(lat, lng) {
      return L.latLng(lat,lng);
    },
  }
};
</script>

Answer 1

您将 API 中的数据存储在变量 this.brews 中，该变量在 data 中不存在。然后你从 markers 数组渲染标记，它是空的并且根本没有修改......

要修复它：

存储数据（下例中的this.breweries）
添加 computed 属性 markers 生成渲染所需的数据...

const vm = new Vue({
  name: "Map",
  el: '#app',
  components: {
    'l-map': window.Vue2Leaflet.LMap,
    'l-tile-layer': window.Vue2Leaflet.LTileLayer,
    'l-marker': window.Vue2Leaflet.LMarker,
  },
  data() {
    return {
      url: "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=CFmlXsYmVozAdWKEtdT5",
      zoom: 11,
      center: [32.714813, -117.129593],
      bounds: null,
      breweries: []
    };
  },
  mounted: function() {
    fetch('https://api.openbrewerydb.org/breweries?by_city=san_diego')
      .then((response) => {
        return response.json();
      }).then(data => {
        this.breweries = data
        //console.log(this.breweries)
      })
  },
  computed: {
    markers() {
      return this.breweries
        .filter((br) => br.latitude && br.longitude) // only breweries with lat + lon data
        .map((br) => ({
          ...br,
          markerLatLng: [br.latitude, br.longitude]
        }))
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.12/vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/leaflet/dist/leaflet.css" />
<script src="//unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="//unpkg.com/vue2-leaflet"></script>

<div id="app">
  <div class="containerTest">
    <div style="height: 80vh">
      <l-map :zoom="zoom" :center="center">
        <l-tile-layer :url="url"></l-tile-layer>
        <l-marker :key="brew.id" v-for="(brew, index) in markers" :lat-lng="brew.markerLatLng"></l-marker>
      </l-map>
    </div>
  </div>
</div>

如何从传单中的 api 生成标记？

How to generate markers from an api in leaflet?

javascript

leaflet

vue.js