javascript - 如何在传单和vue中绘制箭头

Question

我正在制作一个使用 vue-2-leaflet 的应用程序，我需要生成指向其他标记的箭头。现在，我只需要能够在地图上画一个箭头。我稍后可以指点箭头。任何帮助，将不胜感激。

这是我现在的代码

<template>
  <div class="containerTest">
    <p
        :key="index"
        v-for="(brew, index) in markers"
          :lat-lng="latLng(brew.latitude, brew.longitude)"
      >{{brew.latitude}}</p>
    <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 () {
    //get the brewery data
    fetch('https://api.openbrewerydb.org/breweries?by_city=san_diego').then((response) => {
      return response.json();
    }).then(json=>{
        this.markers = json.filter(r => r.latitude != null)
        console.log(this.markers.filter(r => r.latitude != null))
    })
  },
  methods: {
    latLng: function(lat, lng) {
      return L.latLng(lat,lng);
    },
  }
};
</script>

标签： javascriptvue.jsleaflet