- 首先关于地图的组件有很多,leaflet就是其一,Leaflet 是一个开源的 JavaScript 库,用于在网页上创建交互式地图。它提供了一系列易于使用的函数和方法,使开发者可以轻松地添加地图、标记、图层和交互功能。
- 通过命令下载插件leaflet npm install leaflet --save; 下载完成后引入
import L from "leaflet";
import "leaflet/dist/leaflet.css"
- 创建地图容器:在HTML文件中添加一个 `<div>` 元素,用于作为地图的容器。 html中 <div id="map" style="width: 100%; height: 400px;"></div>
- 如图: 进行初始化显示地图,页面加载时调用此方法;
- 定位到某个视图 : a: this.map.flyTo([lat,lon],地图缩放层级);[具有平移效果]; b://点位 var position= [lat, lng];
//把map定位到点位上,13为地图的级别
this.map.setView(position, 13);- 关于 地图上: 图标标记 : let myIcon = L.icon({
iconUrl: “图片路径”,
iconSize: [16, 16] //图片大小
}); L.marker([lat,lon], {icon: myIcon}).addTo(map);绘制线: var parisKievLL = [
[39.89854, 116.3347],
[39.62222,116.2066],
[39.2305, 116.223333]
]; L.polyline(parisKievLL).addTo(this.map);