介紹：Leaflet是一個開源的JavaScript庫，對移動端友好且對地圖有很好的交互性。 大小僅僅只有 33 KB， 同時具有大多數地圖所需要的特點。
Leaflet設計的非常簡單易懂, 同時具有很好的性能和易用性。 它在桌面端和移動端都工作的相當高效，並有大量的插件用於擴張Leaflet的功能。
微信公眾號：673399718嘻嘻
demo圖如下：
使用leaflet.js生成世界地圖非常方便，配置參數記錄下，有興趣的可以看看本例中引入jquery操作dom。
首先：在頁面的頭部引入css文件cdn地址：
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
在body前引入js文件cdn地址：
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
將id為mapid的div標簽放到地圖顯示的地方：
<div id="mapid"></div>
確保地圖容器有定義好的高度，例如在css文件中添加如下代碼：
＃mapid{ height: 180px; }
創建一個中心點在倫敦，使用Mapbox街道瓦片的地圖。首先初始化地圖，並且設置地圖在視窗的中心點和縮放級別：
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
下一步在地圖上增加一個瓦片圖層(渲染的地圖圖片碎片)，在這個例子中我使用Mapbox街道瓦片圖層。創建一個瓦片圖層通常涉及到設置URL template來使用瓦片圖（獲得你的瓦片圖在Mapbox），設置的屬性還包括屬性文本和圖層的最大比例尺。
var mymap = L.map('mapid');
mymap.locate({setView: true, maxZoom: 16});
var position = [];
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(mymap);
Leaflet有一個非常巧妙的方法來處理地圖的縮放級別和探測用戶地理位置－－帶有setView選項的locate方法。使用常用的setView方法在這行代碼中：
locate({setView: true, maxZoom: 16})
這里我設置最大的縮放級別為16，並設置地圖根據位置自動調整窗口。當用戶同意瀏覽器分享用戶位置后，地圖將自動調整視窗中心為該位置。
leaflet.js中有兩個接口locationerror是獲取本地地址失敗后調用的回調函數，而locationfound是獲取獲取本地地址成功后的回調。
確保所有的代碼都在創建div標簽和引用leaflet.js之前。這樣應該沒有什么問題了，你現在應用有一個可以使用的Leaflet地圖了。
參數介紹：
marker可拖動要設置{draggable:true}參數
獲取mark的經緯度信息:marker.getLatLng();
代碼里我用了一個數組來存放拖動圖標返回的地址經緯度，獲取時只需要最后一個確定的位置，即數組最后一個元素：position[position.length-1].lat
彈出框的使用：給地圖綁定點擊事件，事件發生時，bindPopup方法會把HTML內容和彈出框綁定到一起。當你點擊這個對象之后，bindPopup將馬上打開一個彈出框。
function onMapClick(e) {
var popup = L.popup();
popup
.setLatLng(e.latlng)
.setContent("你點擊的位置在 " + e.latlng.toString())
.openOn(mymap);
}
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
<style>
#mapid {
float: left;
height: 500px;
width: 800px;
margin-left: 60px;
}
#right{
height: 500px;
width: 500px;
float: right;
background: rgb(92, 184, 92);
}
</style>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">新建倉庫</h3>
</div>
<div class="panel-body">
<div class="container">
<div class="form-group">
<label class="col-sm-1 control-label">倉庫名稱</label>
<div class="col-sm-11">
<input type="text" class="form-control" id=name" placeholder="輸入您的倉庫名">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">倉庫地址</label>
<div class="col-sm-11">
<input type="text" class="form-control" id="addr">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">地址經度</label>
<div class="col-sm-11">
<input type="text" class="form-control" id="lat" >
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">地址緯度</label>
<div class="col-sm-11">
<input type="text" class="form-control" id="lon" >
</div>
</div>
<div class="col-md-6" style="margin-top: 20px">
<button id="referred" class="btn btn-success">確定</button>
<a id="back" class="btn btn-success">返回</a>
<span>請在地圖中選擇您倉庫的地理位置，以便存儲倉庫信息。</span>
</div>
</div>
<div id="mapid"></div>
<div id="right"></div>
</div>
</div>
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
var mymap = L.map('mapid');
mymap.locate({setView: true, maxZoom: 16});
var position = [];
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(mymap);
function onLocationFound(e) {
L.marker(e.latlng,{draggable: true})
.addTo(mymap)
.bindPopup("請選擇倉庫位置!").openPopup()
.on('dragend', function (event) {
var marker = event.target;
var latlng = marker.getLatLng();
position.push(latlng);
});
}
function onLocationError() {
L.marker([51.5, -0.09],{draggable: true})
.addTo(mymap)
.bindPopup("<b>請選擇倉庫位置!</b>").openPopup()
.on('dragend', function (event) {
var marker = event.target;
var latlng = marker.getLatLng();
position.push(latlng);
});
}
mymap.on('locationerror', onLocationError);
mymap.on('locationfound', onLocationFound);
function onMapClick(e) {
var popup = L.popup();
popup
.setLatLng(e.latlng)
.setContent("你點擊的位置在 " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
$('#referred').click(function () {
var name = $('#name').val();
var address = $('#addr').val();
if(name==''||address==''||position[position.length-1]==undefined){
$('#referred').prop('disabled',false);
$.toast({
position: 'top-right',
text:'請補全倉庫信息！',
icon:'error'
})
}
else {
var lat = position[position.length-1].lat;
var lng = position[position.length-1].lng;
$('#lat').val(lat);
$('#lon').val(lng);
$('#right').text(position)
}
});
//返回倉庫
$('#back').click(function () {
$(this).attr('href','warehouse.html');
})
</script>
</body>
</html>