vue3使用leaflet

Vue3是一个流行的JavaScript框架，用于构建现代化的Web应用程序。Leaflet是一个开源的JavaScript库，用于创建交互式地图。在Vue3中使用Leaflet可以通过安装相应的Vue组件实现。

以下是在Vue3中使用Leaflet的步骤：
1. 首先，安装leaflet和vue2-leaflet两个npm包
npm install leaflet vue2-leaflet
2. 在Vue组件中导入所需的组件和样式
import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'
3. 在Vue组件中添加LMap、LTileLayer和LMarker组件，并设置必要的属性和事件监听器
<l-map :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker :lat-lng="markerLatLng"></l-marker>
</l-map>
4. 在Vue组件中定义所需的data属性和方法
data() {
return {
zoom: 13,
center: [51.505, -0.09],
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
markerLatLng: [51.505, -0.09]
}
},
methods: {
handleClick(e) {
this.markerLatLng = [e.latlng.lat, e.latlng.lng]
}
}
5. 在Vue组件中添加所需的CSS样式，以确保地图正确显示