百度地图Javascript SDK
百度地图
2015年8月13日
1 目标：增加地图插件，完成地图功能和扩展功能。
地图功能：显示、缩放、平移。比例尺、工具条、鹰眼等工具条。绘制点、线、面等元素。图层控制。路径规划等功能。
2 原理：提供地图插件，扩展js功能。
参见：..\javascript.docx插件部分。
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不能共存。
下载网址：http://developer.baidu.com/map/jsdemo/demo/convertor.js
http://developer.baidu.com/map/jsdemo/demo/changeMore.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}]}
参考：http://developer.baidu.com/map/index.php?title=webapi/guide/changeposition
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)。
参见：计算两点距离：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()。
参见：折线距离、多边形面积：getPolylineDistance()、getPolygonArea()。
4.8.4测面积：.getDistance(pt1,pt2),返回两点的距离值。
参见：折线距离、多边形面积：getPolylineDistance()、getPolygonArea()。
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()。
参考：http://blog.csdn.net/chenguang79/article/details/40506469
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));