如何在 vue-2-leaflet 中使用 api 生成标记

Question

我正在尝试使用 api 生成标记。现在我可以很好地得到 api 并将其存储在一个变量中，但我就是无法显示标记。我正在使用 v-for 循环来显示所有标记。

任何帮助将不胜感激

这是我的代码

<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>
    </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

您的控制台有任何错误吗？

我注意到的一些事情：

在你的 class 中，没有属性 brews。取而代之的是标记。

将this.brews = json更改为this.markers = json
我检查了 API 并且它 returns null 在 latitude, longitude 你的大部分对象。 Ι 将添加一个 v-if 来检查值是否存在。

如何在 vue-2-leaflet 中使用 api 生成标记

how to generate markers using an api in vue-2-leaflet

javascript

leaflet

vue.js

vuejs2