百度地圖Javascript SDK
百度地圖
2015年8月13日
地圖功能：顯示、縮放、平移。比例尺、工具條、鷹眼等工具條。繪製點、線、面等元素。圖層控制。路徑規劃等功能。
2 原理：提供地圖外掛，擴充套件js功能。
3 方法：百度地圖Js SDK
注意：百度的文件雖然沒有下載版本，但是比高德的強10000多倍，條理，清晰，實用。
3.1 載入js庫：使用申請的key線上獲取js庫,當前最新版本2.0。
示例：
<!DOCTYPEhtml>
<html>
<head>
<title>BaiduMapDemo</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#map{height:100%}
</style>
<scripttype="text/javascript"src="jquery.min.js"></script>
<scripttype="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eQv0G7tIacmmSYWmkgj1gWoz">
</script>
</head>
<body>
<divid="map"></div>
<scripttype="text/javascript">
$(document).ready(function(){
var map = new BMap.Map("map");
var point = new BMap.Point(116.404,39.915);
map.centerAndZoom(point, 15);
});
</script>
</body>
</html>
3.2 組織方式：以Map類為基礎組織整個地圖。沒有MVC的概念（與高德相同）。
3.2.1M：資料層，處理資料圖層。
addTileLayer()，removeTileLayer()，getTileLayer()。
3.2.2V：檢視層，處理顯示內容。
包括各種互動控制元件，滑鼠配置，繪製方法等。
3.2.3C：控制層：MV的互動。
處理地圖狀態，如平移、縮放等。
4 基本功能：地圖操作、基本控制元件、繪製、標註、事件、座標轉換。
4.1 地圖功能：縮放、平移。
縮放：map.enableScrollWheelZoom()，預設關閉滑鼠縮放。
平移：map. enableDragging()。預設的滑鼠狀態是就是平移。
示例：支援縮放和平移的地圖。
<!DOCTYPEhtml>
<html>
<head>
<title>BaiduMapDemo</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#map{height:100%}
</style>
<scripttype="text/javascript" src="jquery.min.js"></script>
<scripttype="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eQv0G7tIacmmSYWmkgj1gWoz">
</script>
</head>
<body>
<divid="map"></div>
<scripttype="text/javascript">
$(document).ready(function(){
var map = new BMap.Map("map");
map.enableScrollWheelZoom();
var point = new BMap.Point(116.404,39.915);
map.centerAndZoom(point, 15);
});
</script>
</body>
</html>
4.2 控制元件：工具欄、比例尺、鷹眼等互動控制元件。
4.2.1組織方式：所有控制元件使用相同的基類Control，使用map.addControl()新增。
Control包含控制元件的基本功能，包括停靠位置，可見性等。
4.2.2導航工具欄：NavigationControl，可以設定不同的樣式。
var nav = new BMap.NavigationControl();
map.addControl(nav);
4.2.3比例尺：ScaleControl，可以設定不同的樣式。
var nav = new BMap.ScaleControl();
map.addControl(nav);
4.2.4鷹眼：OverviewMapControl，可以設定不同的樣式。
var ov = new BMap.OverviewMapControl();
map.addControl(ov);
4.2.5示例：帶定位功能的導航欄
<!DOCTYPEhtml>
<html>
<head>
<title>BaiduMapDemo</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#map{height:100%}
</style>
<script type="text/javascript"src="jquery.min.js"></script>
<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=eQv0G7tIacmmSYWmkgj1gWoz"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
<scripttype="text/javascript">
var map = new BMap.Map("map");
$(document).ready(function(){
map.centerAndZoom(new BMap.Point(116.404,39.915), 11);
var navigationControl = newBMap.NavigationControl({
enableGeolocation: true
});
map.addControl(navigationControl);
console.debug("inited.");
var geolocationControl = newBMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess",function(e){
console.debug("locationSuccess="+e.message);
});
geolocationControl.addEventListener("locationError",function(e){
alert(e.message);
});
map.addControl(geolocationControl);
});
</script>
4.3 繪製功能：繪製點、線、面。
4.3.1基類：Overlay，覆蓋於地圖之上的部分內容，通常稱之為覆蓋物（Overlay）。
設定顯示，隱藏等基本功能。
使用map.addOverlay()，map.removeOverlay()操作。
4.3.2幾何點：Point（lng,lat）,有相等（equals（））判斷函式。
4.3.3範圍：Size（width,height）,有相等判斷函式。
4.3.4圖示點：Marker，可以設定位置、標註、資訊框等。
var pt = new BMap.Point(116.417,39.909);
var myIcon=newBMap.Icon("gun.gif",new BMap.Size(50,50));
var marker=newBMap.Marker(pt,{icon:myIcon});
map.addOverlay(marker);
Icon,僅代表一個圖示。
newBMap.Icon('Mario.png',new BMap.Size(32,32),{anchor:new BMap.Size(16,16)})
4.3.5拆線：Polyline（array,opts），可以設定座標點和樣式。
編輯拆線、多邊形：enableEditing,disableEditing。
var pl = new BMap.Polyline([newBMap.Point(116.417,39.909),new BMap.Point(116.617,39.909),new BMap.Point(116.417,39.809)],{strokeColor:'#F00'});
map.addOverlay(pl);
4.3.6多邊形：Polygon（array,opts），可以設定座標點和樣式。
var pg = new BMap.Polygon([
newBMap.Point(116.417,39.809),
newBMap.Point(116.617,39.809),
newBMap.Point(116.417,39.709)
],{
strokeColor:'#0000ff',
fillColor:'#00ff00'});
map.addOverlay(pg);
4.3.7圖形編輯：滑鼠編輯，右鍵完成編譯。
var pg = new BMap.Polygon([
newBMap.Point(116.417,39.809),
newBMap.Point(116.617,39.809),
newBMap.Point(116.417,39.709)
],{
strokeColor:'#0000ff',
fillColor:'#00ff00',
enableEditing:true});
pg.addEventListener('rightclick',function(e){
pg.disableEditing();
});
map.addOverlay(pg);
4.3.8圖形繪製：滑鼠繪製。
4.4 事件：滑鼠互動
4.4.1 滑鼠繪製工具：BMapLib.DrawingManager。
4.4.1.1 引入js和css：下載js和css(這個可以從示例中下載，然後根據需要修改)。
<scripttype="text/javascript"src="DrawingManager.js"></script>
<link rel="stylesheet"type="text/css" href="DrawingManager_min.css"/>
4.4.1.2 設定功能：是否開啟編輯，是否顯示工具欄，位置，圖形樣式等。
var drawingManager = new BMapLib.DrawingManager(map,{
isOpen:true,
enableDrawingTool: true,
drawingMode: BMAP_DRAWING_POLYGON,
drawingToolOptions: {
anchor:BMAP_ANCHOR_TOP_RIGHT,
drawingModes : [
BMAP_DRAWING_MARKER,
BMAP_DRAWING_CIRCLE,
BMAP_DRAWING_POLYLINE,
BMAP_DRAWING_POLYGON,
BMAP_DRAWING_RECTANGLE
]
},
circleOptions:{
strokeColor:"red",
fillColor:"blue"
}
}); ;
4.4.1.3 示例：預設使用滑鼠繪製多邊形。
<!DOCTYPEhtml>
<html>
<head>
<title>BaiduMapDemo</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#map{height:100%}
</style>
<scripttype="text/javascript"src="jquery.min.js"></script>
<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=eQv0G7tIacmmSYWmkgj1gWoz"></script>
<scripttype="text/javascript"src="DrawingManager.js"></script>
<link rel="stylesheet"type="text/css" href="DrawingManager_min.css"/>
<body>
<div id="map"></div>
</body>
</html>
<scripttype="text/javascript">
$(document).ready(function(){
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.404,39.915), 11);
var nav = new BMap.NavigationControl();
map.addControl(nav);
var scale = new BMap.ScaleControl();
map.addControl(scale);
var ov = new BMap.OverviewMapControl();
map.addControl(ov);
//add drawing manager tool
var drawingManager = newBMapLib.DrawingManager(map, {
isOpen:true,
enableDrawingTool: true,
drawingMode: BMAP_DRAWING_POLYGON,
drawingToolOptions: {
anchor:BMAP_ANCHOR_TOP_RIGHT,
drawingModes : [
BMAP_DRAWING_MARKER,
BMAP_DRAWING_CIRCLE,
BMAP_DRAWING_POLYLINE,
BMAP_DRAWING_POLYGON,
BMAP_DRAWING_RECTANGLE
]
},
circleOptions:{
strokeColor:"red",
fillColor:"blue"
}
});
});
</script>
4.5 標註：資訊框等
4.5.1文字標籤：Label，設定文字內容和位置。
可以獨立使用，也可以與Marker配合使用（使用Marker作為位置）。
var lb = new BMap.Label("BMap LabelTest.",{
position:newBMap.Point(116.617,39.809)
});
map.addOverlay(lb);
var lb = new BMap.Label("BMap LabelTest.",{
position:newBMap.Point(116.617,39.809)
});
//map.addOverlay(lb);
marker.setLabel(lb);
4.5.2資訊視窗：InfoWindow，設定文字內容。
var infoContent="this is forinfowindow<p>SecondLine</p><img style='float:right;margin:4px'id='imgDemo' src='Mario.png' width='139' height='104' title='IMG'/>";
var infoWin=newBMap.InfoWindow(infoContent);
map.openInfoWindow(infoWin,pt);
4.5.3自定義資訊視窗：BMapLib.InfoBox，擴充套件的InfoWindow可以自定義資訊視窗樣式。
需要InfoBox_min.js。
可以設定標題、關閉按鈕圖片、顯示位置等。
var infoContent="<divclass='title' style='background:#00f;color:#f00'><strong>中海雅園</strong><spanclass='price'>均價43000</span></div>thisis for infowindow<p>SecondLine</p><imgstyle='float:right;margin:4px' id='imgDemo' src='Mario.png' width='139'height='104' title='IMG'/>";
var infoWin=newBMapLib.InfoBox(map,infoContent,{
boxStyle:{
background:"url('gun.gif')no-repeat center top",
width:"350px",
height:"210px"
},
coloseIconMargin:"1px 1px 00",
enableAutoPan:true,
offset:new BMap.Size(25,25)
});
infoWin.open(marker);
4.5.4帶檢索功能的資訊視窗：BMapLib.SearchInfoWindow，具有搜尋框，能夠傳送簡訊等功能。
需要SearchInfoWindow_min.js,SearchInfoWindow.css，phone.png,iw_close.gif。
var infoContent="this is forinfowindow<p>SecondLine</p><img style='float:right;margin:4px'id='imgDemo' src='Mario.png' width='139' height='104' title='IMG'/>";
var infow=new BMapLib.SearchInfoWindow(map,infoContent,{
title:"SearchXX",
width:290,
height:180,
panel:"panel",
enableAutoPan:true,
searchTypes:[
BMAPLIB_TAB_SEARCH, //周邊檢索
BMAPLIB_TAB_TO_HERE, //到這裡去
BMAPLIB_TAB_FROM_HERE//從這裡出發
]
});
marker.addEventListener("click",function(e){
infow.open(marker);
});
4.6 座標轉換：BMap.Convertor.translate，GPS，GCJ，百度座標轉換。
4.6.1引入座標轉換庫：單點轉換Convertor.js，批量轉換changeMore.js，注意：兩個js不能共存。
4.6.2單點轉換：BMap.Convertor.translate()
BMap.Convertor.translate(newBMap.Point(116.397428,39.90923),0,function(point){
console.debug(point);
});
結果：
4.6.3批量轉換：BMap.Convertor.transMore()
functioncallback(results){
console.debug(results);
for(var i in results){
console.debug(results[i]);
console.debug(newBMap.Point(results[i].x,results[i].y));
}
}
var ptArray=[newBMap.Point(116.397428,39.90923), new BMap.Point(116.397428,39.80923)];
BMap.Convertor.transMore(ptArray,0,callback);
結果：
4.6.4座標轉換HTTP服務：BMap.Convertor.translate()
格式為：
http://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924;114.21892734521,29.575429778924&from=1&to=5&ak=你的金鑰
結果：
{"status":0,"result":[{"x":114.23074897986,"y":29.579085333961},{"x":114.23075006509,"y":29.579081280206}]}
4.6.5GPS或Google座標直接新增圖示點：BMapLib.MapWrapper
需要MapWrapper.min.js
使用addOverlay()將一個marker轉換為百度座標。
示例：mario是gps座標在百度地圖上的顯示，gun是轉換後的位置。
var pt = new BMap.Point(116.417,39.909);
var myIcon=newBMap.Icon("gun.gif",new BMap.Size(50,50));
var marker=newBMap.Marker(pt,{icon:myIcon});
var myIcon0=newBMap.Icon("close.png",new BMap.Size(50,50));
var marker0=newBMap.Marker(pt,{icon:myIcon0});
map.addOverlay(marker0);
var gpsConverter=newBMapLib.MapWrapper(map,BMapLib.COORD_TYPE_GPS);
gpsConverter.addOverlay(marker);
4.7 屬性查詢：BMap.LocalSearch，可以設定查詢的範圍、內容、結果顯示等。
可以設定多個關鍵字，可以設定查詢的範圍（矩形或圓形）。
var local=newBMap.LocalSearch(pt,{renderOptions:{
map:map,
panel:"result"
}});
local.search("天安門");
4.8 測量：測距，測面積。
4.8.1互動測距：BMap.DistanceTool。
需要DistanceTool_min.js。
open()後滑鼠進入測距狀態，雙擊或呼叫close()關閉。
var dist=new BMapLib.DistanceTool(map,{});
dist.open();
4.8.2兩點測距：map.getDistance(pt1,pt2)或者BMapLib.GeoUtils.getDistance(pt1,pt2)。
console.debug(map.getDistance(newBMap.Point(116.404, 39.915),new BMap.Point(117.404, 39.915)));
console.debug(map.getDistance(newBMap.Point(116.404, 38.915),new BMap.Point(117.404, 39.915)));
4.8.3幾何型別測距：BMapLib.GeoUtils.getPolylineDistance()。
4.8.4測面積：.getDistance(pt1,pt2),返回兩點的距離值。
5 方法：高階功能
5.1 標註分組管理：MarkerManager，可以設定顯示、隱藏及級別。
需要MarkerManager_min.js。
示例：設定兩組圖示，但僅顯示第一組。
//multi markers
var markers=[];
var pt = null;
var marker=null;
var lb=null;
for(var i=0;i<8;++i){
pt=newBMap.Point(116+Math.random()*4,38+Math.random()*4);
marker=new BMap.Marker(pt);
lb = new BMap.Label("BMap LabelTest1="+i,null);
marker.setLabel(lb);
markers.push(marker);
}
//makermanager
var mgr=new BMapLib.MarkerManager(map,{
maxZoom:18,
trackMarekers:true
});
mgr.addMarkers(markers);
mgr.showMarkers();
var markers2=[];
for(var i=0;i<8;++i){
pt=newBMap.Point(116+Math.random()*4,38+Math.random()*4);
marker=new BMap.Marker(pt);
lb = new BMap.Label("BMap LabelTest2="+i,null);
marker.setLabel(lb);
markers2.push(marker);
}
//makermanager
var mgr2=new BMapLib.MarkerManager(map,{
maxZoom:18,
trackMarekers:true
});
mgr2.addMarkers(markers2);
// mgr2.showMarkers();
5.2 動畫：BMapLib.LuShu，軌跡回放，可以設定軌跡、速度、樣式等。
需要lushu_min.js。
注意：路書並不包括軌跡繪製，需要單獨繪製軌跡。
var route=[];
for(var i=0;i<8;++i){
pt=newBMap.Point(116+Math.random()*1,38+Math.random()*1);
route.push(pt);
}
var pl = newBMap.Polyline(route,{strokeColor:'#F00'});
map.addOverlay(pl);
var lushu = new BMapLib.LuShu(map,route,{
defaultContent:"from a tob.",
speed:4500,
landmarkPois:[{lng:route[1].lng,lat:route[1].lat,html:'pausept',pauseTime:2}],
autoView:true,
enableRotation:true
});
lushu.start();
5.3 聚類:BMapLib.MarkerClusterer，可以設定聚類的範圍（畫素），樣式等。
需要texticonoverlay_min.js和markerclusterer_min.js兩個js檔案。
注意：聚類與標註Label有衝突，可能導致部分標註無法正常顯示。
var markers=[];
var pt = null;
var marker=null;
var lb=null;
for(var i=0;i<8;++i){
pt=newBMap.Point(116+Math.random()*4,38+Math.random()*4);
marker=new BMap.Marker(pt);
lb = new BMap.Label("BMapLabel Test="+i,null);
marker.setLabel(lb);
markers.push(marker);
map.addOverlay(marker);
}
//cluster
var markerCluster = newBMapLib.MarkerClusterer(map,{markers:markers});
5.4 路線規劃：駕車、公交、步行路徑規劃
5.4.1駕車路徑規則：BMap.DrivingRoute()，可以設定路線的起止點、方法、回撥函式等。
可以設定一個html的id作為返回結果。
var driving=new BMap.DrivingRoute(map,{
policy:BMAP_DRIVING_POLICY_LEAST_TIME,
renderOptions:{
map:map,
panel:"panel",
autoViewport:true
}
});
driving.search("天安門","四惠東");
5.4.2公交路徑規則：BMap.TransitRoute()，可以設定路線的起止點、方法、回撥函式等。
var transit=new BMap.TransitRoute(map,{
renderOptions:{
map:map,
panel:"result",
autoViewport:true
},
policy:BMAP_TRANSIT_POLICY_LEAST_TIME
});
transit.setSearchCompleteCallback(function(e){
console.debug(transit.getResults().getPlan(0).getRoute(0).getDistance(true));
});
transit.search("天安門","四惠東");
5.4.3駕車路徑規則：BMap.DrivingRoute()，可以設定路線的起止點、回撥函式等。
var walking=new BMap.WalkingRoute(map,{
renderOptions:{
map:map,
panel:"result",
autoViewport:true
}
});
walking.setSearchCompleteCallback(function(e){
console.debug(walking.getResults().getPlan(0).getRoute(0).getDistance(true));
});
walking.search("天安門","故宮");
5.5 幾何工具：GeoUtils,角度弧度轉化、幾何關係、測量等。
需要GeoUtils_min.js。
5.5.1角度弧度轉化：degreeToRad(),radToDegree()。
console.debug("45degree=rad:"+BMapLib.GeoUtils.degreeToRad(45));
console.debug("pairad=degree:"+BMapLib.GeoUtils.radToDegree(Math.PI));
5.5.2 計算兩點距離：getDistance(pt1,pt2)。
var pt1 = new BMap.Point(116.400,39.910);
var pt2 = new BMap.Point(116.402,39.912);
console.debug("pt1-pt2="+BMapLib.GeoUtils.getDistance(pt1,pt2));
console.debug("pt1-pt2=(map)"+map.getDistance(pt1,pt2));
5.5.3折線距離、多邊形面積：getPolylineDistance()、getPolygonArea()。
var pts = [];
var pt1 = new BMap.Point(116.400,39.910);
var pt2 = new BMap.Point(116.402,39.912);
var pt3 = new BMap.Point(116.403,39.914);
var pt4 = new BMap.Point(116.404,39.917);
var pt5 = new BMap.Point(116.406,39.918);
pts.push(pt1);
pts.push(pt2);
pts.push(pt3);
pts.push(pt4);
pts.push(pt5);
var polyline = new BMap.Polyline(pts);
var polygon = new BMap.Polygon(pts);
var dis =BMapLib.GeoUtils.getPolylineDistance(polyline);
var area =BMapLib.GeoUtils.getPolygonArea(polygon);
console.debug("dis="+dis+",area="+area);
5.5.4幾何關係：isPointInCircle()，isPointInPolygon()，isPointInRect()，isPointOnPolyline()。
var pt1 = new BMap.Point(116.400,39.910);
var pt2 = new BMap.Point(116.402,39.912);
var pt3 = new BMap.Point(116.403,39.914);
var pt4 = new BMap.Point(116.404,39.917);
var pt5 = new BMap.Point(116.406,39.918);
pts.push(pt1);
pts.push(pt2);
pts.push(pt3);
pts.push(pt4);
pts.push(pt5);
var polyline = new BMap.Polyline(pts);
var polygon = new BMap.Polygon(pts);
console.debug("pt1 in polygon?"+BMapLib.GeoUtils.isPointInPolygon(pt1,polygon));
console.debug("pt1 onpolyline?"+BMapLib.GeoUtils.isPointOnPolyline(pt1,polyline));