前言

在學習使用百度地圖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 前言城市商圈及行政區域路書測距工具交通流量總結