Leaflet是一個插件可以引入地圖資源，提供方法插件等可以對地圖進行交互。
- 准備：
就像jQuery一樣使用一個插件需要引入這個插件的文件。首先在<head>標簽中添加Css樣式,然后引入Leaflet的js文件.這里具體看官方文檔
創建一個顯示地圖的容器，並設置高度
- 地圖初始化：
設置打開地圖的地理位置，顯示級別，坐標系等。
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
在Leaflet的 L 對象就像jQuery的 $ 一樣暴露給window供我們調用里面的方法。
使用L.map() 函數構造器實例化一個地圖對象。
用法：
L.map(id,{
//可選參數設定，常用的參數有
center：[ ] / /初始化地圖的地理中心
zoom：number / /初始化地圖的縮放
})
setView方法：設定地圖心事的地理中心和縮放級別。上面的代碼也可以寫成
var mymap = L.map('mapid',{ center:[51.505,-0.09], zoom:13 })
- 加載地圖源
Leaflet官方推薦使用MapBox地圖。Mapbox的矢量地圖是瓦片地圖，需要調用打開瓦片圖層的接口 L.TileLayer
上面說到瓦片地圖，什么是瓦片地圖？
一幅精確到街道級別的世界地圖圖片寬度為數以百萬計的像素，由於這些數據太大了，從而導致無法一次下載並且在內存里也無法一次都hold住。而瀏覽器並行獲取和顯示多張小圖片，比獲取和顯示一張大圖片要高效的多，就有了地圖瓦片來提高效率。由許多小的正方形的圖片組成，這些小圖片稱作瓦片。瓦片的大小一般為256*256像素，這些瓦片一個挨一個並列放置以組成一張很大的看似無縫的地圖。
例如百度地圖，當放大時就可以看到還沒加載到的方塊空缺。下圖是百度地圖加載的圖片請求。
調用L.tileLayer(utl,{
//添加可選參數
例如：
attribution:'hahaha'
}).addTo(mymap)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
上面代碼關鍵在於請求地圖url.上面加載的應該是OpenStreetMap。還可以加載Mapbox地圖(需要去官網注冊賬戶然后申請)，高德地圖，谷歌地圖，也可以使用在線地圖（ARCGis online），具體URL怎么回事，去哪里得到URL我也是搞不懂是怎么回事，如果有知道的告訴告訴弟弟。
除了以上常見的地圖提供商的地圖，也可以使用自己的地圖，例如圖片。
L.imageOverlay(imageUrl,imageBounds).addTo(mymap)
視頻格式也可以最為地圖，使用
L.iamgeOverlay(videoUrl,videoBounds).addTo(mymap)