Leaflet+vue2简单的搭建

1，npm下载依赖

npm install leaflet --save

2，main.js引入

import L from 'leaflet' import 'leaflet/dist/leaflet.css' import 'leaflet.wmts' Vue.use(L)

3，创建一个文件

` // 1 搭建地图

var leafletMap = L.map("map-container", {
  center: [19.458, 113.7359],// 设置地图中心点
  zoom: 4, //设置当前地图显示的缩放等级
})

`

` //2 加载地图服务

var urlMap = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'//地图地址
var wmtsMap = new L.TileLayer(urlMap)
leafletMap.addLayer(wmtsMap)`

`// 3 设置marker.icon样式

var myIcon = L.icon({
  // 必填路径
  iconUrl: "https://cdn.icon-icons.com/icons2/259/PNG/128/ic_location_on_128_28437.png",
  iconSize: [30, 30], //图标像素
})
L.marker([21.2557, 110.1134], { icon: myIcon }).addTo(leafletMap)`

完整代码