Leaflet教程
Leaflet简介
Leaflet 是领先的开源 JavaScript 库，用于移动友好的交互式地图。 它仅重约 39 KB 的 JS，具有大多数开发人员需要的所有映射功能。
引用JS和CSS
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" />
<script type="text/javascript" src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
创建div作为地图容器
<div id="map_container"></div>
在CSS中设置地图容器的高度
#map_container{ height: 180px; }
地图完整的例子
html文件同目录的tiles文件夹，用于存放离线地图瓦片。默认支持高德地图瓦片、腾讯地图瓦片、必应地图瓦片、谷歌地图瓦片等。因百度坐标系特殊，不支持百度地图瓦片。地图瓦片下载
注意：中心坐标的前者为纬度，后者为经度，与国内常用地图百度和高德的中心坐标（前者经度，后者纬度）相反。
实例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leaflet离线地图</title>
<link rel="stylesheet" href="leaflet/leaflet.css" />
<script type="text/javascript" src="leaflet/leaflet.js"></script>
<style type="text/css">
html, body, #map_container{
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
}
</style>
</head>
<body>
<div id="map_container"></div>
</body>
<script type="text/javascript">
var map = L.map('map_container', {
center: [30.62840809925475, 118.398990578125],
zoom: 4,
minZoom: 4,
maxZoom: 19
});
L.tileLayer('tiles/{z}/{x}/{y}.png', {
attribution: 'Leaflet离线地图'
}).addTo(map);
</script>
</html>
全部教程