leaflet是用來在頁面中創(chuàng)建地圖并操縱地圖的開源js庫。它簡單易上手，有大量可擴(kuò)展的插件，是我在做地圖的時(shí)候最常使用的一款地圖引擎。
????????????首先我們來做一個(gè)小demo，感受一下leaflet吧。??????
準(zhǔn)備工作：
1.?在HTML代碼中寫入一個(gè)id為map的div，作為地圖的容器。
2.?同時(shí)設(shè)定該div的高度。
3.?并且引入leaflet.css和leaflet.js。
4.?在script中加入以下代碼：這樣我們就能得到一個(gè)最簡單的地圖demo，該地圖可以通過鼠標(biāo)進(jìn)行縮放和移動(dòng)。
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '? <a >OpenStreetMap</a> contributors'
}).addTo(map);
代碼詳解：
1.L是leaflet的簡稱，setView 里有兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)坐標(biāo)，表示設(shè)置這個(gè)點(diǎn)為當(dāng)前地圖的中心點(diǎn)，第二個(gè)參數(shù)表示設(shè)置當(dāng)前地圖的層級(jí)為13。
2.tileLayer方法用來加載和顯示地圖。這里用的osm的地圖。網(wǎng)址模板如下：'http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'：
<1>.{s}是可用的子域，順序地用于幫助每個(gè)域限制瀏覽器并行請求，子域值在選項(xiàng)中指定; a，b或c通過默認(rèn)，可省略
<2>.{z}-縮放級(jí)別
<3>.{x}以及{y}-tile坐標(biāo)
<4>.{r}可用于將“@ 2x”添加到URL以加載視網(wǎng)膜圖層
3.attribution:要在屬性控制中顯示的字符串，描述層數(shù)據(jù)，例如“?Mapbox”?？墒÷?，但是處于尊重版權(quán)考慮最好還是加上
- .addTo(map)表示把當(dāng)前生成的地圖實(shí)例添加到自定義的map 容器里。
marker的相關(guān)操作
最常見的是在地圖上添加標(biāo)記，即marker。
添加marker的兩種方式。
??直接調(diào)用L.marker() 方法，參數(shù)是一個(gè)坐標(biāo)點(diǎn)，然后添加到自己的地圖上。這種辦法都是直接給了固定的坐標(biāo)，marker是靜態(tài)的。
var marker = L.marker([51.5, -0.09]).addTo(mymap);
??實(shí)例化一個(gè)marker.這里的e.latlng是獲取你在地圖上觸發(fā)的事件的經(jīng)緯度坐標(biāo).也就是只要觸發(fā)事件就會(huì)得到一個(gè)marker。此時(shí)添加marker是動(dòng)態(tài)的。draggable:表示是否可以拖動(dòng)。一個(gè)使DOM元素可拖動(dòng)的類（包括觸摸支持）。內(nèi)部用于地圖和標(biāo)記拖動(dòng)。僅適用于定位的元素
L.DomUtil.setPosition
marker = new L.Marker(e.latlng, {draggable:true});
map.addLayer(marker);
??移除marker
map.removeLayer(marker);
??將當(dāng)前marker的位置設(shè)置為地圖的中心點(diǎn)
map.panTo() //使用平移或縮放動(dòng)畫平移到該位置
map.setView() //將新視圖設(shè)置為所需位置和縮放級(jí)別
暫時(shí)先介紹這么多，下回再補(bǔ)充????????????????????
