百度地图 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();
}
//在此用户可将数据提交到后台数据库中
}
自定义覆盖物
拉框放大工具
拉框搜索
区域限制
几何运算
交通流量
检索控件
《百度地图 JavaScript 开源库》 由 常伟华 创作。
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议 | 3.0 中国大陆许可协议进行许可。