vue+leaflet绘制街道地图，并在上面显示站点标记。-526互联

从0开始。

记录一下完成过程中遇到的问题及解决方法

1、离线显示地图

已完成。

方案就是下载瓦片地图到本地或者服务器上，使用路径访问图片/map/{z}/{x}/{y}/tile.png

2、在地图上显示标记。（单一标记，且默认打开提示框）

const icon = L.icon({
     iconUrl: require('../../../assets/erp/weizhi.png'),// marker图片地址
     iconSize: [15, 20]// marker宽高
})

const marker = L.marker([item.lat, item.lng], { icon: icon, title: item.title })

.addTo(pointerLayer)

.bindPopup(item.title)

.openPopup()

3、因为只需要显示某个地市的地图，下载的瓦片地图也只有这个范围，不加以限制，拖拽时会拖拽到灰色区域（表示图片加载失败）

所以需要限制拖拽区域。

// 设置拖动范围
      var corner1 = L.latLng(30.750088420396953,120.23729165764759)
      var corner2 = L.latLng(28.304063924517305,123.03476722908898)
      var bounds = L.latLngBounds(corner1, corner2)// 构建视图限制范围

this.map = L.map(this.idName, {

　　maxBounds: bounds,

})