最近項目需要，接觸了一下osm的地圖實現。並使用leafletjs實現了一些功能，此地圖與百度地圖的一些POI信息點有所不同，百度地圖的POI點是通過計算放到每張瓦片上去的，而osm的數據全都在地圖上了。當然這個也可以改變，換成我們自己的POI信息點加上去，我覺得使用離線地圖的話可以考慮下這個osm，當然前提是功能不是很複雜或者要求特別高的。（當然主要看老闆，哈哈。。。）廢話不多說了 。。
主要是利用leaflet.js實現功能，當然根據需求要使用到對應的js文件。
初始我需要引入leaflet的css js 文件
<link rel="stylesheet" type="text/css" href="leaflet.css" />
<link rel="stylesheet" href="leaflet/Leaflet.label-master/dist/leaflet.label.css" />
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="leaflet-src.js"></script>
其實最主要的就是要把osm的數據導入到服務器，然後我們去請求返回瓦片，渲染到頁面
var osmUrl='請求地址+/osm_tiles/{z}/{x}/{y}.png';
var osmAttrib='map';
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 18, attribution: osmAttrib});
map = new L.Map('mapdiv', {
layers: [osm],
center: new L.LatLng(緯度, 經度),
zoom: 12,
doubleClickZoom :false//不可以通過雙擊放大，因爲雙擊的作用是添加矩形
});
//map.addControl(new customControl());//添加lengend按鈕
map.setView(new L.LatLng( 緯度，經度 ),10);//14
map.addLayer(osm);//添加圖層
以上代碼這樣就是在頁面中添加上地圖--------
//在地圖上添加標記
var plot = [
{
"name":"I am Tom",
"lng":"115.58000",
"lat":"25.12000",
"details":"this is a cat"
},
{
"name":"I am Jerry",
"lng":"115.68000",
"lat":"25.22000",
"details":"this is a mouse"
},
];
for (let d =0;d<plot.length;d++){
var plotll = new L.LatLng( plot[d].lat, plot[d].lng, true );//標記的座標
var mark = new L.Marker(plotll);
mark.data = plot[d];
map.addLayer(mark);//添加標記到地圖
mark.bindPopup("<h4>" + plot[d].name + "</h4>" + plot[d].details);//綁定提示框
}
以上代碼這樣就是在頁面中添加上點Marker--------
//添加自定義工具
// var customControl = L.Control.extend({
// options: {
// position: 'topleft'
// },
// onAdd: function (map) {
// var container = L.DomUtil.create('div', 'leaflet-control-zoom leaflet-bar leaflet-control control-bot');
//
// container.style.backgroundColor = 'white';
// container.style.backgroundSize = "30px 60px";
// container.style.width = '30px';
// container.style.height = '30px';
// container.style.marginTop = '0';
// container.onclick=function () {
// console.log('命中！！！');
// };
// return container;
// }
// });
有很多功能和百度地圖類似，可以參考下。。。小弟只是簡單說了一下入門，後續還有很多功能給大家說（大神勿噴）