下载Leaflet
官网下载:https://leafletjs.com/reference.html
CSDN:https://download.csdn.net/download/hmxm6/89291989
选择版本号
添加html文件
加入代码
html,body,#view{
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
display: flex;
}
#mapDiv {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
}
let map = L.map("mapDiv", {
minZoom: 10,
maxZoom: 17,
center: [36.635712, 120.768945],
zoom: 13,
zoomDelta: 0.5,
fullscreenControl: false,
zoomControl: false,
attributionControl: false
});
var MarkArray = new Array(); // 地图点数组
var MarkArrayTimeOut;
var ClickBZMessage = null;
let url = "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}";
this.baseLayer=L.tileLayer(url,{
attribution: '',
minZoom: 10,
maxZoom: 17,
subdomains: "1234"
});
this.map.addLayer(this.baseLayer);
L.control.zoom();
其中map里面
minZoom: 最小缩放 maxZoom: 最大缩放 center: 地图初始点
下载离线地图
下载软件
https://download.csdn.net/download/hmxm6/89292287
打开软件,设置下载地图类型和位置
选择层级,选择地图存放路径,点击下载
然后把地图地址替换成下载的地址
url = “…/map/{z}/{x}/{y}/tile.png”;
打开浏览器就可以看到地图了