传单和Vuejs.如何添加一个新的标记onclick在Map上？

093gszye 于 2023-03-31 发布在 Vue.js

关注(0)|答案(2)|浏览(142)

我想添加和删除标记在我的传单Map。我发现这个很好的主题，但代码是在JS。
传单-如何找到现有的标记，并删除标记？
我的代码是这样的：

<template>
 <l-map :zoom="zoom" :center="center">
  <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
  <l-marker :lat-lng="marker" :draggable=true></l-marker>
 </l-map>
</template>

<script>
data:function() {
        return {
  zoom:7,
  center: L.latLng(33.901445, -5.532788),
  url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 
  contributors',
  marker: L.latLng(47.413220, -1.219482),
  }},
</script>

也许我应该从创建一个像这样的click函数开始：

<l-map :zoom="zoom" :center="center" v-on:click="addMarker"></l-map>

然后我在方法中写了正确的addMarker函数。但是我找不到正确的文档。
我还想得到新标记在数据中的位置。
谢谢你

vue.js

来源：https://stackoverflow.com/questions/54499070/leaflet-and-vuejs-how-to-add-a-new-marker-onclick-in-the-map

2条答案

按热度按时间

2uluyalo1#

事实证明，这真的非常非常简单。使用一个带有v-for的数组而不是一个标记。单击标记会在该索引处拼接标记。单击map会创建一个带有latlng的新标记。下面的代码片段基于this fiddle。

var {
  LMap,
  LTileLayer,
  LMarker
} = Vue2Leaflet;

new Vue({
  el: '#app',
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data() {
    return {
      zoom: 14,
      center: L.latLng(47.413220, -1.219482),
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      markers: [
        L.latLng(47.412, -1.218),
        L.latLng(47.413220, -1.219482),
        L.latLng(47.414, -1.22),
      ]
    }
  },
  methods: {
    removeMarker(index) {
      this.markers.splice(index, 1);
    },
    addMarker(event) {
      this.markers.push(event.latlng);
    }
  }
});

html, body, #app {
  height: 100%;
  margin: 0;
}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/vue2-leaflet@1.0.1/dist/vue2-leaflet.js"></script>
<div id="app">
  <l-map :zoom="zoom" :center="center" @click="addMarker">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker v-for="marker, index in markers" :lat-lng="marker" @click="removeMarker(index)"></l-marker>
  </l-map>
</div>
<

赞(0）回复(0）举报 2023-03-31

scyqe7ek2#

像这样在html标记上添加事件@click=“addMarker”是行不通的，因为事件是在html级别上触发的。
另一方面，您应该在html中添加另一个名为@ready=“mapReady”的事件

const markers = ref([])
const addMarker = e => {
 markers.value.push({ lat: e.latlng.lat, lng: e.latlng.lng })
}
const mapReady = map => {
    map.on('click', addMarker)
}

<l-map :options="{ attributionControl: false }" :use-global-leaflet="false"
 v-model:zoom="zoom" :center="center" class="cursor-auto"
 @ready="mapReady"></l-map>

赞(0）回复(0）举报 2023-03-31

我来回答

传单和Vuejs.如何添加一个新的标记onclick在Map上？

2条答案

相关问题

热门标签

最新问答