百度地图 JavaScript 开源库

JavaScript 开源库不支持极速版JavaScript API

百度地图JavaScript开源库，是一套基于百度地图API二次开发的开源的代码库。目前提供多个lib库，帮助开发者快速实现在地图上添加Marker、自定义信息窗口、标注相关开发、快速加载城市列表、拉框放大、拉框搜索、区域限制设置、几何运算、实时交通、检索与公交驾车查询、鼠标绘制工具等功能。

百度地图JavaScript开源库秉着与大家一起学习交流的态度，全部开源。您可以参考开发文档，直接调用现有的开源库，实现您的需求；或者下载每个类的源文件，自行修改再使用。源文件里具有详尽的注释，可以帮助您更好的理解。

热力图

城市商圈及行政区域

绘制弧线类

类 BMapLib.CurveLine 弧线类，实现效果的入口。 实例化该类后，即可返回一个弧线的Polyline对象，使用方法同Polyline 即可调用map.addOverlay方法添加到地图当中 源文件: CurveLine.js.

类

类	描述
BMapLib.CurveLine(Array, opts)	CurveLine类的构造函数

CurveLine类的构造函数 BMapLib.CurveLine(Array, opts)

参考示例：

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
var points = [new BMap.Point(116.432045,39.910683), new BMap.Point(116.388522,39.985964), 
new BMap.Point(117.218862,39.141468), new BMap.Point(121.485947,31.510083)];

var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //新建弧线覆盖物对象

map.addOverlay(curve); //添加到地图

curve.enableEditing(); //开启编辑功能

参数:
{Array} Array
Point数组对象
{Json Object} opts
可选的输入参数，非必填项。可输入选项参考PolylineOptions

鼠标绘制工具条库

检索信息窗口类

地图包裹类

事件包装器

自定义信息窗口

标注管理器

百度地图的标注管理器。多marker的管理，更高效、解析更快。 基于Baidu Map API 1.2 +。

MarkerManager 入口。 实例化该类后，可调用addMarkers,show,hide等方法，控制marker。 请注意，此类比较适用于以下情况： 大量marker分布到不同的zoom级别中，比如：18级的时候显示100个marker，15级的时候显示另外的100个marker

类

类	描述
BMapLib.MarkerManager(map, opts)	MarkerManger类的构造函数

方法

方法	返回值	描述
addMarker(marker, minZoom, maxZoom)	None	添加单个marker
addMarkers(markers, minZoom, maxZoom)	None	批量添加marker
clearMarkers(none)	None	移除在manager中的所有marker,并清空。
getMarkerCount(zoom)	None	返回此zoom下可见marker的数量
hide()	None	隐藏marker，此方法只是控制css样式中的display的值。
removeMarker(marker)	None	从manager跟地图中，移除marker（如果它现在可见）
show()	None	显示marker,此方法只是控制css样式中的display的值。
showMarkers()	None	显示地图上的marker
toggle(marker)	None	显示或者隐藏marker

//"borderPadding" : {Number} 当前viewport额外的padding，落在这个padding中的marker会被添加到地图上，即使他们不是完全可见的。 
//"maxZoom" : {Number} 设置需要marker manager需要监视的最大的zoom，如果没有给出，默认为地图的最大的zoom。. 
var mgr = new BMapLib.MarkerManager(map,{borderPadding: padding,maxZoom: 18,trackMarkers: true});

var mgr = new BMapLib.MarkerManager(map,{
    borderPadding: padding
    ,maxZoom: 18
    ,trackMarkers: true
});

var markersConfig = [{minZoom: 1, maxZoom: 10, markerCount:80 }
                ,{minZoom: 11, maxZoom: 12, markerCount:10 }
                ,{minZoom: 13, maxZoom: 15, markerCount:150 }
                ,{minZoom: 16, maxZoom: 17, markerCount:10 }
                ,{minZoom: 18, maxZoom: 19, markerCount:100 }
                ];
for(var i in markersConfig){
    var t = markersConfig[i];
    var mks = getRandomMarker(map,t.markerCount,padding);
    mgr.addMarkers(mks,t.minZoom,t.maxZoom)
 }
mgr.showMarkers();

富标注

路书

测距工具

聚合marker

MarkerClusterer标记聚合器用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能。 主入口类是MarkerClusterer， 基于Baidu Map API 1.2。

类 BMapLib.MarkerClusterer 用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能

源文件: MarkerClusterer.js.

类

类	描述
BMapLib.MarkerClusterer(map, options)	MarkerClusterer

方法

方法	返回值	描述
addMarker(marker)	None	添加一个聚合的标记。
addMarkers(markers)	None	添加要聚合的标记数组。
clearMarkers()	None	从地图上彻底清除所有的标记
getClustersCount()	Number	获取聚合的总数量。
getGridSize()	Number	获取网格大小
getMap()	Map	获取聚合的Map实例。
getMarkers()	Array	获取所有的标记数组。
getMaxZoom()	Number	获取聚合的最大缩放级别。
getMinClusterSize()	Number	获取单个聚合的最小数量。
getStyles()	Array	获取聚合的样式风格集合
isAverageCenter()	Boolean	获取单个聚合的落脚点是否是聚合内所有标记的平均中心。
removeMarker(marker)	Boolean	删除单个标记
removeMarkers(markers)	Boolean	删除一组标记
setGridSize(size)	None	设置网格大小
setMaxZoom(maxZoom)	None	设置聚合的最大缩放级别
setMinClusterSize(size)	None	设置单个聚合的最小数量。
setStyles(styles)	None	设置聚合的样式风格集合

BMapLib.MarkerClusterer(map, options)

{Json Object} options
可选参数，可选项包括：
markers {Array} 要聚合的标记数组
girdSize {Number} 聚合计算时网格的像素大小，默认60
maxZoom {Number} 最大的聚合级别，大于该级别就不进行相应的聚合
minClusterSize {Number} 最小的聚合数量，小于该数量的不能成为一个聚合，默认为2
isAverangeCenter {Boolean} 聚合点的落脚位置是否是所有聚合在内点的平均值，默认为否，落脚在聚合内的第一个点
styles {Array} 自定义聚合后的图标风格，请参考TextIconOverlay类

简单示例

var MAX = 10;
var markers = [];
var pt = null;
var i = 0;
for (; i < MAX; i++) {
    pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
    markers.push(new BMap.Marker(pt));
}
//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});

添加标注工具

百度地图的添加标注工具类，对外开放。 允许用户在地图上点击后添加一个点标注，允许用户设定标注的图标样式。 主入口类是MarkerTool， 基于Baidu Map API 1.2。

类 BMapLib.MarkerTool 地图上添加标注类，实现点击地图添加点标注入口。 实例化该类后，即可调用该类提供的open 方法开启添加点标注状态。

源文件: MarkerTool.js.

类

类	描述
BMapLib.MarkerTool(map, opts)	MarkerTool类的构造函数

方法

方法	返回值	描述
close()	None	关闭工具
getIcon()	Icon	获取标注图标及鼠标跟随样式
open()	Boolean	开启工具
setIcon(icon)	设置标注的图标及鼠标跟随样式

事件

事件	参数	描述
onmarkend(e)	{Event Object}	添加标注过程中，每次点击地图添加完标注时，派发事件的接口

简单示例

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
//{Json Object} opts
//可选的输入参数，非必填项。可输入选项包括： 
//"icon" : {Icon} 标注使用到的图标，标注时候鼠标跟随样式也通过此属性设置 
//"followText" : {String} 跟随鼠标移动的说明文字，默认为空 
//"autoClose" : {Boolean} 是否在每次添加完Marker后自动关闭工具
var mkrTool = new BMapLib.MarkerTool(map, {followText: "添加一个点"});

//回调函数会返回event参数，包括以下返回值： 
//"type : {String} 事件类型 
//"target：{MarkerTool} 当前MarkerTool对象 
//"marker：{Marker} 当前添加的Marker标注
mkrTool.addEventListener("markend", function(e) {  alert(e.type);  });

复杂示例

var infoWin = new BMap.InfoWindow(html.join(""), {offset: new BMap.Size(0, -10)});
var curMkr = null; // 记录当前添加的Mkr

var mkrTool = new BMapLib.MarkerTool(map, {autoClose: true});
mkrTool.addEventListener("markend", function(evt){ 
    var mkr = evt.marker;
    mkr.openInfoWindow(infoWin);
    curMkr = mkr;
});

mkrTool.open(); //打开工具 
var icon = BMapLib.MarkerTool.SYS_ICONS[index]; //设置工具样式，使用系统提供的样式BMapLib.MarkerTool.SYS_ICONS[0] -- BMapLib.MarkerTool.SYS_ICONS[23]
mkrTool.setIcon(icon); 

//提交数据
function fnOK(){
    if(curMkr){
        //设置label
        var lbl = new BMap.Label(name, {offset: new BMap.Size(1, 1)});
        lbl.setStyle({border: "solid 1px gray"});
        curMkr.setLabel(lbl);

        //设置title
        var title = "电话: " + tel + "\n\r" + "地址: " +addr + "\n\r" + "描述: " + desc;
        curMkr.setTitle(title);        
    }
    if(infoWin.isOpen()){
        map.closeInfoWindow();
    }

    //在此用户可将数据提交到后台数据库中
}

自定义覆盖物

拉框放大工具

拉框搜索

区域限制

几何运算

交通流量

检索控件