1、在head引用leaflet.css和leaflet.js文件
<link rel="stylesheet" href="./leaflet/leaflet.css">
<script src="./leaflet/leaflet.js"></script>
2、在body创建地图容器,并设置容器的高度和宽度
需要给容器设置id,在创建地图时需要传入
<div id="map" style="height:400px width:400px"></div>
3、创建地图、图层,并加载图层
在创建完成地图和图层后,使用图层的addTo()方法,将图层加载至地图显示,如下加载高德基础底图
<script>
var map = L.Map('map'); // 使用id为'map'的容器创建地图
// 创建图层
var layer = L.TileLayer('http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
maxZoom: 18, // 设置最大缩放等级
});
layer.addTo(map); // 将图层加载至地图
map.setView([40,118],5); // 设置初始中心点及缩放等级
</script>