基於百度地圖開發網易班車地圖導航展示
阿新 • • 發佈：2019-02-18
col uri type open one 記錄 length () 代碼
來到網易已經不知不覺一兩個月了，最近把原來租的房子出租後，打算重新租一套房子。找到一個好房子不容易，首先考慮交通問題，上下班時間不能耗費太長，網易提供了遍布全城的班車系統，不過說實話，貌似只有文字說明（http://crystalpot.cn/menus/bus），看到這些地名，對於我一個外鄉人來說內心是懵X的，想到如果有一個如高德地圖版的班車導航就好了，在哪個小區租房，附近的班車信息一目了然，想到便去做，翻了翻百度地圖官方文檔，寫了幾行代碼，大致實現了需求。
預覽
如圖所示，只有寥寥幾個站點，因為沒過多久，有個租房平臺就幫我在公司附近找到了房源，剩下的班車數據我也就擱淺。這裏曬出自己的代碼，記錄一下。
代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <style type="text/css"> body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: fantasy; } .title{ color: #cc5a2f; font-size: 14px; } .content{ color: #222; font-size: 14px; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cRFeXxS642Nkclc8cAvzumelvIbju9Gx"></script> <title>網易班車地圖展示</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> //標註點經緯度集合 var points = [ ['120.077218', '30.333151', '新竹橋公交站','上班 7:35'], ['120.087068', '30.342169', '墩池路（顏寧醫療門診部）','上班 7:40'], ['120.091712','30.336725','北港橋公交站','上班 7:45'], ['120.103673','30.311658','機動車輛管理所公交站','上班 7:55'], ['120.126191','30.284389','古翠路華星路口','上班 8:07'], //等待愛心人士繼續完善，參考文檔http://crystalpot.cn/menus/bus ]; // 百度地圖API功能 var map = new BMap.Map("allmap", {minZoom: 12, maxZoom: 19}); // 創建Map實例 map.centerAndZoom(new BMap.Point(120.1972695145, 30.1933909541), 12); // 初始化地圖,設置中心點坐標和地圖級別 //添加地圖類型控件 map.addControl(new BMap.MapTypeControl({ mapTypes: [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ] })); map.setCurrentCity("杭州"); // 設置地圖顯示的城市,此項是必須設置的 map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放 //循環添加標註點 for (var i = 0; i < points.length; i++) { var point = new BMap.Point(points[i][0], points[i][1]); //新建一個點 var marker = new BMap.Marker(point); // 創建標註 // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫 marker.setTitle(i); //設置標註信息 marker.addEventListener("mouseover", //添加鼠標移入移除事件 function () { var opts = { width: 0, // 信息窗口寬度 height: 0, // 信息窗口高度 title: "<span style='display: none'></span>", // 信息窗口標題 }; var infoWindow = new BMap.InfoWindow(infoStyle(points[this.getTitle()]), opts); // 創建信息窗口對象 this.openInfoWindow(infoWindow, this.getPosition()); // 打開信息窗口 }); marker.addEventListener("mouseout", function () { map.closeInfoWindow(); }); map.addOverlay(marker); // 將標註添加到地圖中 } function infoStyle(point) { var dom = "<p class='title'>"+point[2]+"</p>"; dom += "<p class='content'>"+point[3]+"</p>"; return dom; } </script>
工具
百度地圖JavaScript API
百度地圖拾取坐標系統
基於百度地圖開發網易班車地圖導航展示