百度地图API之JavaScript开源库2
前言
在学习使用百度地图API的时候，必定会涉及到相关的开源库。下面主要介绍一部分JavaScript开源库，有城市商圈及行政区域、路书、测距工具和交通流量。
城市商圈及行政区域
城市行政区域和商圈数据获取工具类，使用者可以通过调用该接口智能获取城市行政区域和商圈多边形及相关坐标点数据。 主入口类是CityList， 基于Baidu Map API 1.5。
测试源码
<!DOCTYPE html>
<html>
<head>
<title>商圈</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./css/style.css" />
<script src="http://api.map.baidu.com/api?v=2.0&ak=DDd05fcba9fea5b83bf648515e04fc4c" type="text/javascript"></script>
<script type="text/javascript" src="./js/CityList_min.js"></script>
</head>
<body>
<div id="container">
<div id="map" style="width: 99%;height: 550px;"></div>
</div>
<script type="text/javascript"> var map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(121.478125,31.229649), 12); map.enableScrollWheelZoom(); var citylist = new BMapLib.CityList({ container:"container", map:map }); citylist.getBusiness('中关村',function(json){ console.log('商圈'); console.log(json); }); citylist.getSubAreaList(131,function(json){ console.log('城市列表'); console.log(json); }); citylist.addEventListener('cityclick',function(e){ console.log(e); }); </script>
</body>
</html>测试结果
路书
百度地图的路书。实现marker沿路线运动，并有暂停等功能。 基于Baidu Map API 1.2 +。
测试源码
<!DOCTYPE html>
<html>
<head>
<title>LuShu CustomIcon demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./css/style.css" />
<script src="http://api.map.baidu.com/api?v=2.0&ak=DDd05fcba9fea5b83bf648515e04fc4c" type="text/javascript"></script>
<script type="text/javascript" src="./js/LuShu_min.js"></script>
</head>
<body>
<div id="map" style="width: 99%;height: 550px;"></div>
<div id="result" style="float:right;position:absolute;left:700px;top:0;"></div>
<button id="run" >run</button>
<button id="stop">stop</button>
<button id="pause">pause</button>
<button id="hide">hide infoWindow</button>
<button id="show">show infoWindow</button>
<script type="text/javascript"> var map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(121.478125,31.229649), 12); map.enableScrollWheelZoom(); var lushu; var myIcon = new BMap.Icon("http://api.map.baidu.com/lbsapi/cloud/cms/Mario.png",{width:128,height:128},{anchor:new BMap.Size(65,128)}); // 实例化一个驾车导航用来生成路线 var drv = new BMap.DrivingRoute('北京', { onSearchComplete: function(res) { if (drv.getStatus() == BMAP_STATUS_SUCCESS) { var arrPois = res.getPlan(0).getRoute(0).getPath(); map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'})); map.setViewport(arrPois); lushu = new BMapLib.LuShu(map,arrPois,{ defaultContent:"从天安门到百度大厦", speed:4500, icon:myIcon, //enableRotation:true, landmarkPois: [ {lng:116.314782,lat:39.913508,html:'加油站',pauseTime:200}, {lng:116.315391,lat:39.964429,html:'高速公路收费<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>',pauseTime:30}, {lng:116.381476,lat:39.974073,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:20} ]}); } } }); drv.search('天安门','百度大厦'); //绑定事件 $("run").onclick = function(){ lushu.start(); } $("stop").onclick = function(){ lushu.stop(); } $("pause").onclick = function(){ lushu.pause(); } $("hide").onclick = function(){ lushu.hideInfoWindow(); } $("show").onclick = function(){ lushu.showInfoWindow(); } function $(element){ return document.getElementById(element); } </script>
</body>
</html>测试结果
测距工具
百度地图的测距工具类，对外开放。 允许用户在地图上点击完成距离的测量。 使用者可以自定义测距线段的相关样式，例如线宽、颜色、测距结果所用的单位制等等。 主入口类是DistanceTool， 基于Baidu Map API 1.2。
测试源码
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=DDd05fcba9fea5b83bf648515e04fc4c" type="text/javascript"></script>
<script type="text/javascript" src="./js/DistanceTool_min.js"></script>
</head>
<body>
<div align="center">
<div id="map" style="width: 100%;height: 600px;"></div>
<button onclick="javascript:myDis.open();">Open</button>
<button onclick="javascript:myDis.close();">Close</button>
</div>
<script type="text/javascript"> var map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(116.404, 39.915),15); map.enableScrollWheelZoom(); var myDis = new BMapLib.DistanceTool(map); // 如果要调试事件接口，请打开下方屏蔽代码， // 在firefox或者chrome下查看调试信息 /*myDis.addEventListener("drawend", function(e) { console.log("drawend"); console.log(e.points); console.log(e.overlays); console.log(e.distance); }); myDis.addEventListener("addpoint", function(e) { console.log("addpoint"); console.log(e.point); console.log(e.pixel); console.log(e.index); console.log(e.distance); }); myDis.addEventListener("removepolyline", function(e) { console.log("removepolyline"); console.log(e); }); */ </script>
</body>
</html>测试结果
交通流量
百度地图的交通流量控件，对外开放。 控制当前，未来交通流量图层在地图上的显示，隐藏 等。 主入口类是TrafficControl， PC端基于Baidu Map API 1.2。移动端基于Baidu Map API 1.4，提供高清底图。
测试源码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://api.map.baidu.com/library/TrafficControl/1.2/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
<script src="http://api.map.baidu.com/api?v=2.0&ak=DDd05fcba9fea5b83bf648515e04fc4c" type="text/javascript"></script>
<script type="text/javascript" src="./js/TrafficControl_min.js"></script>
</head>
<body>
<div align="center">
<div id="map" style="width: 100%;height: 600px;"></div>
</div>
<script type="text/javascript"> var map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(116.404, 39.915),15); map.enableScrollWheelZoom(); var ctrl = new BMapLib.TrafficControl(); map.addControl(ctrl); ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT); </script>
</body>
</html>测试结果
总结
本文主要介绍一部分JavaScript开源库，有城市商圈及行政区域、路书、测距工具和交通流量。具体请参考百度开源库：http://lbsyun.baidu.com/index.php?title=open/library。