时间戳

首页 > 解决方案 > 使用 Vue2Leaflet 时如何处理点击？

vuejs2 - 使用 Vue2Leaflet 时如何处理点击？

问题描述

我正在使用带有 vuejs2 的 Vue2Leaflet（https://github.com/KoRiGaN/Vue2Leaflet），我已经渲染了地图，并且我想在单击地图时添加一个函数来处理，因为我阅读了文档https://korigan .github.io/Vue2Leaflet/#/但仍然不知道该怎么做。

任何意见，将不胜感激。

标签： vuejs2leaflet

解决方案

下面的例子演示了如何处理地图点击事件Vue2Leaflet：

<l-map :zoom="zoom" :center="center" @click="handleMapClick">
   <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
</l-map>



export default {
  name: "LeafletMap",
  components: {
    "l-map": LMap,
    "l-tile-layer": LTileLayer,
    "l-marker": LMarker
  },
  data() {
    return {
      zoom: 13,
      center: L.latLng(47.41322, -1.219482),
      url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    };
  },

  methods: {
    handleMapClick(event) {
       //...
    }
  }
};

这是一个演示

推荐阅读