leaflet.js是一个专门处理地图的js库，具体介绍官网有文档 不过官网的文档是全英文 的 对初学者或者英语基础不好的开发者不大友好 这里送上一个学习的中文连接 ：
http://www.aspku.com/kaifa/javascript/208500.html 接下来和大家一起入门leafletjs
第一步 ：下载leafletjs包 下载地址：https://leafletjs.com/download.html
下载到桌面后记得解压放到自己创建的前端项目中
2、新建一个基础的前端HTML框架：可以使用！加上tab键一键生成
3、在HTML文件中引入这个包里的样式文件和js文件 注意 引入js文件需要引leaflet-src.js这个 这个没有被压缩
4、在body中创建一个存放地图的容器 一般我们这么写
<div id="map"></div>5、写一个函数 用于初始化地图：
<script>
function initMap(){
// 实例化一个地图对象 将实例对象挂载到map这个容器上
var map = L.map('map', {
center: [51.505,-0.09],
zoom: 3
})
// var map=L.map("map").setview([51.505,-0.09],9);
}
</script>这段代码我简单讲解一下 函数中我们需要实例化一个地图对象 使用map进行 使用L.map()构造方法进行实例化 第一个参数是实例控制的区域 （即id为map的div）第二个参数是地图的基础设置 center表示地图当前显示的经纬度 （注意 这个经纬度顺序是反的 维度在前 经度在后） zoom表示缩放等级
有些同学可能已经注意到下面有一段被注释掉的代码 这个代码和上一个代码的作用一致 用那个都行
6、写完这个后我们还需要为这个存放地图的容器设置一个宽高 这样地图才能显示出来 比如我们想设置全屏可见 可以这么做：
<style>
#map {
height: calc(100vh);
width: 100%;
}
</style>7、最后就是执行这个js代码了 我们在body中加一个onload事件函数 <body onload="initMap()"> 接着运行浏览器查看效果即可
因为当前的地图没有设置图层 所以只能看到一个地图容器 如图
下面是HTML的代码 （注意leafletjs需要自己去下载引用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./leaflet/leaflet.css">
<script src="./leaflet/leaflet-src.js"></script>
<style>
#map {
height: calc(100vh);
width: 100%;
}
</style>
</head>
<body onload="initMap()">
<div id="map"></div>
<script>
function initMap(){
// 实例化一个地图对象 将实例对象挂载到map这个容器上
var map = L.map('map', {
center: [51.505,-0.09],
zoom: 3
})
// var map=L.map("map").setview([51.505,-0.09],9);
}
</script>
</body>
</html>接下来的一段时间里我会继续学习leafletjs 会陆续更新教程 感兴趣的可以关注我
