前言

在学习使用百度地图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(,), );

        map.enableScrollWheelZoom();

        var citylist = new BMapLib.CityList({
            container:"container",
            map:map
        });

        citylist.getBusiness('中关村',function(json){
            console.log('商圈');
            console.log(json);
        });

        citylist.getSubAreaList(,function(json){
            console.log('城市列表');
            console.log(json);
        });

        citylist.addEventListener('cityclick',function(e){
            console.log(e);
        });
    </script>
</body>
</html>

测试结果

百度地图API之JavaScript开源库2 前言城市商圈及行政区域路书测距工具交通流量总结

路书

百度地图的路书。实现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(,), );
    map.enableScrollWheelZoom();

    var lushu;
    var myIcon = new BMap.Icon("http://api.map.baidu.com/lbsapi/cloud/cms/Mario.png",{width:,height:},{anchor:new BMap.Size(,)});
    // 实例化一个驾车导航用来生成路线
    var drv = new BMap.DrivingRoute('北京', {
        onSearchComplete: function(res) {
            if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
                var arrPois = res.getPlan().getRoute().getPath();
                map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));
                map.setViewport(arrPois);

                lushu = new BMapLib.LuShu(map,arrPois,{
                    defaultContent:"从天安门到百度大厦",
                    speed:,
                    icon:myIcon,
                    //enableRotation:true,
                    landmarkPois: [
                       {lng:,lat:,html:'加油站',pauseTime:},
                       {lng:,lat:,html:'高速公路收费<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>',pauseTime:},
                       {lng:,lat:,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:}
                 ]});          
            }
        }
    });

    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>

测试结果

百度地图API之JavaScript开源库2 前言城市商圈及行政区域路书测距工具交通流量总结

测距工具

百度地图的测距工具类，对外开放。允许用户在地图上点击完成距离的测量。使用者可以自定义测距线段的相关样式，例如线宽、颜色、测距结果所用的单位制等等。主入口类是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(, ),);
    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>

测试结果

百度地图API之JavaScript开源库2 前言城市商圈及行政区域路书测距工具交通流量总结

交通流量

百度地图的交通流量控件，对外开放。控制当前，未来交通流量图层在地图上的显示，隐藏等。主入口类是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(, ),);
    map.enableScrollWheelZoom();

    var ctrl = new BMapLib.TrafficControl();
    map.addControl(ctrl);
    ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);

</script>
</body>
</html>

测试结果

百度地图API之JavaScript开源库2 前言城市商圈及行政区域路书测距工具交通流量总结

总结

本文主要介绍一部分javascript开源库，有城市商圈及行政区域、路书、测距工具和交通流量。具体请参考百度开源库：http://lbsyun.baidu.com/index.php?title=open/library。

百度地图API之JavaScript开源库2 前言城市商圈及行政区域路书测距工具交通流量总结

前言

城市商圈及行政区域

测试源码

测试结果

路书

测试源码

测试结果

测距工具

测试源码

测试结果

交通流量

测试源码

测试结果

总结

继续阅读

20/20: Top 20 Programming Lessons I've Learned in 20 Years

20条编程经验

【观点】风雨20年：我所积累的20条编程经验【观点】风雨20年：我所积累的20条编程经验

【转载】风雨20年：我所积累的20条编程经验

恢复Linux操作系统的GRUB引导程序

用mapreduce计算wordCount和手机流量统计程序运行过程WordCount统计手机流量统计

浅谈---测试Native Windows Command与Native PowerShell Command哪个效率高

Xcode中创建Target的步骤

利用Fiddler进行移动端弱网测试

各种二分查找

【原创】编程之美之二分搜索

CentOS7下TestLink环境的部署

软件测试基础_对应TestLink整理的测试计划流程步骤

七牛云-C#SDK-上传-前期准备

[转]iOS微信小视频优化心得

测试面试题整理

百度地图API之JavaScript开源库2 前言 城市商圈及行政区域 路书 测距工具 交通流量 总结

前言

城市商圈及行政区域

测试源码

测试结果

路书

测试源码

测试结果

测距工具

测试源码

测试结果

交通流量

测试源码

测试结果

总结

继续阅读

百度地图API之JavaScript开源库2 前言城市商圈及行政区域路书测距工具交通流量总结