上一篇主要介绍了百度地图的基本组件,这一篇主要探讨一下百度地图可以提供的服务及扩展。
一、服务
1、搜索
LocalSearch
用于位置检索、周边检索和范围检索,可以自定义结果的显示设置。包括:
- 普通搜索:
search
方法。 - 周边搜索:
searchNearby
方法,可指定坐标点和半径。 - 矩形范围搜索:
searchInBounds
方法,可指定一个Bounds
做为搜索的矩形区域。
下例是在地图上搜索“联通营业厅”,并在地图上显示:
var local = new BMap.LocalSearch(map, {
renderOptions: {
map: map
}
});
local.search('联通营业厅');
2、导航和路况
-
公交导航:
TransitRoute
导航要提供起点和终点。返回的结果是TransitRouteResult
。下例是公交导航结果:
var transit = new BMap.TransitRoute(map, { renderOptions: { map: map } }); transit.search("古平岗", "雨花大数据园");
- 驾车导航:
DrivingRoute
导航要提供起点和终点。返回的结果是DrivingRouteResult
。 -
步行导航:
WalkingRoute
导航要提供起点和终点。返回的结果是WalkingRouteResult
。下例是把导航结果显示在“r-result”面板上:
var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, panel: "r-result", // 显示结果的面板 autoViewport: true } }); walking.search("古平岗", "新模范马路");
3、位置信息服务
地址解析 Geocoder
- 根据地址描述获得坐标:
var myGeo = new BMap.Geocoder(); // 将地址解析结果显示在地图上,并调整地图视野 myGeo.getPoint("南京市古平岗4号", function(point){ if (point) { map.centerAndZoom(point, 16); map.addOverlay(new BMap.Marker(point)); } }, "南京市");
- 反向地理编码:
var myGeo = new BMap.Geocoder(); // 根据坐标得到地址描述 myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){ if (result){ alert(result.address); } });
本地城市 LocalCity
获取用户所在的城市位置信息。
var myCity = new BMap.LocalCity();
二、扩展工具
工具是百度地图提供的开源库,要使用工具中的功能要把开源库导入。按照我的理解我把它们分成几类:
1、地图标注类:这些工具主要是对地图的标注信息功能进行扩展。如:
- MarkerTool:自定义标注点和标注点信息。
- MarkerCluster:解决加载大量点要素到地图上产生覆盖现象的问题。
- TextIconOverley:自定义覆盖物扩展。
- 等等。
2、路线类
- LuShu:百度地图的路书。实现marker沿路线运动,并有暂停等功能。
- DistanceTool:测量地图上自定义线段的距离。
- DrawingManager:提供鼠标绘制点、线、面、多边形(矩形、圆)的编辑工具条的开源代码库。
3、可视化扩展
- 大数据可视化库:用来展示大量地理信息数据,可以自定义类型。
- 热力图:提供热力图可视化展现功能。
三、实例
现在我们完成一个功能:在地图上添加一个搜索框,用户可以自定义标记点,并提供从用户坐标到标注点的公交路线服务。
1、首先注册百度开发者,创建一个应用,拿到应用密钥。
2、创建一个HTML文件,引入百度地图API
注意替换掉密钥
。由于我们还用到三个扩展,所以还用引入SearchControl
,MarkerTool
和SearchInforWindow
。
3、在一个单独的js
文件中写代码
以下只介绍几个主要功能的实现:
-
获取用户坐标
坐标可以在
GeoLocation
对象的getCurrentPosition
方法中的回调函数中得到:var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function getCoords(r) { if (this.getStatus() === BMAP_STATUS_SUCCESS) { start = new BMap.Point(r.point.lng, r.point.lat); }
- 添加搜索框
var searchControl = new BMapLib.SearchControl({ container: 'searchbox', //存放控件的容器 map: map, //关联地图对象 type: LOCAL_SEARCH //检索类型 });
- 添加自定义信息窗口
var infoWindow = new BMapLib.SearchInfoWindow(map, '', { width: 290, height: 105, title: '您的位置', // 信息窗口标题 panel: 'panel', //检索结果面板 enableAutoPan: true, searchType: [ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] });
效果:
- 添加自定义标注
// 图上标注 var mkrTool = new BMapLib.MarkerTool(map, { autoClose: true, followText: '标注' }); // 点击右键表示标注功能开启 map.addEventListener('rightclick', function (e) { mkrTool.open(); });
- 公交路线获取和展示
walking = new BMap.TransitRoute(map, { renderOptions: { map: map, panel: 'result' // 信息展示区域ID }, onResultsHtmlSet: function () { // 得到公交路线之后的回调函数:显示结果到result面板 $('#result').show(); } });
完整代码请看。