百度地圖api 百度地圖api網頁版
前言
PS：我所使用的的是百度地圖Javascript API 3.0
本文是對之前使用的延續，繼續對百度地圖API的一些使用去做歸納和總結，本次主要是對地圖上的事件以及路線規劃做下一下介紹，如果有小伙伴沒有看過之前的百度地圖API基本使用（一），百度地圖API基本使用（二），可以先去觀看一下，前期所需要的一些準備，以及一些基本的用法。
感興趣的小伙伴可以自行查看百度地圖官方提供的文檔
百度地圖開放平臺開發文檔中的Javascript API
也可以通過下方示例中心更直觀地看到百度地圖API的一些使用，以及它的一些特性
百度地圖開放平臺-示例中心
想深入研究百度地圖avascript API 3.0方法參數信息的話，可以通過下方類參考
百度地圖avascript API v3.0類參考
另外不同版本的API可以自行在開發文檔中的類參考類目中找到,請自行查找
不過要注意：實例中心使用的是BMap去創建容器的，最新版GL地圖命名空間為BMapGL, 可按住鼠標右鍵控制地圖旋轉、修改傾斜角度。
BMapGL在引入API的方式如下：
<script type=&34;text/javascript&34; src=http://www.bangdewater.com/skin/ai/image/nopic.gif>BMap在引入API的方式如下：
<script type=&34;text/javascript&34; src=http://www.bangdewater.com/skin/ai/image/nopic.gif>按照你自己的需求去引用
好的，廢話不多說，開整
百度地圖API-事件
1. 地圖事件
1.地圖加載完成事件 這個事件顧名思義就是在地圖加載完成之后會調用這個事件，我們可以去做一些操作。
var map = new BMap.Map(&39;container&39;);
map.centerAndZoom(new BMap.Point(116.404, 39.928), 15);
map.enableScrollWheelZoom(true);
map.addEventListener(&39;tilesloaded&39;, function () {
alert(&39;地圖加載完成！&39;);
});
實現的效果就是在地圖加載完成之后，會彈出地圖加載完成的提示！實際應用的時候可以能就會涉及到一些基于地圖的初始化操作。具體情況具體分析，就不做過多贅述了。
2.地圖單擊事件 這個事件顧名思義就是在當我們鼠標點擊地圖上的時候，就會觸發這個事件。
var map = new BMap.Map(&39;container&39;);
map.centerAndZoom(new BMap.Point(116.404, 39.928), 15);
map.enableScrollWheelZoom(true);
map.addEventListener(&39;click&39;, function (e) {
alert(&39;點擊位置經緯度：&39; + e.latlng.lng + &39;,&39; + e.latlng.lat);
});
我們實現的這個就是單擊地圖的時候就會觸發，可以獲取到這個點的經緯度等信息。以及我們之前有介紹的覆蓋物的一些觸發事件，基本上都是使用的是這個單擊事件，使用addEventListener監聽click去實現的，這個方法還有監聽別的事件，就不一一舉例了，給大家看一下有哪些事件可以監聽，這些都是從官方提供的類參考中找到的。
3.注銷事件 這個注銷方法也比較簡單，上一個點擊事件我們使用的是addEventListener監聽click去實現的，這個注銷實際上就是移除這個事件，類似于之前的刪除覆蓋類都是使用的remove這個字段，對應的就是removeEventListener監聽click去刪除這個點擊事件實現的。
var map = new BMap.Map(&39;container&39;);
map.centerAndZoom(new BMap.Point(116.404, 39.928), 15);
map.enableScrollWheelZoom(true);
function showInfo(e) {
alert(&39;經緯度：&39; + e.latlng.lng + &39;,&39; + e.latlng.lat);
}
// 添加地圖點擊事件
function addMapEvent() {
map.addEventListener(&39;click&39;, showInfo);
}
// 移除地圖點擊事件
function removeMapEvent() {
map.removeEventListener(&39;click&39;, showInfo);
}
如果想研究比較詳細的地圖事件的小伙伴可以自行查看研究
事件-地圖事件
2. 覆蓋物事件
1.覆蓋物鼠標事件 這個覆蓋物鼠標事件實質就是地圖的點擊事件，只不過對象換成了覆蓋物對象，本質都是使用addEventListener去監聽事件的發生。
創建一個點和一個面覆蓋物，然后去給這兩個覆蓋物添加鼠標點擊事件
var map = new BMap.Map(&39;container&39;);
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
// 繪制點
var marker = new BMap.Marker(point);
map.addOverlay(marker);
// 繪制面
var polygon = new BMap.Polygon([
new BMap.Point(116.387112, 39.920977),
new BMap.Point(116.385243, 39.913063),
new BMap.Point(116.394226, 39.917988),
new BMap.Point(116.401772, 39.921364),
new BMap.Point(116.41248, 39.927893)
], {
strokeColor: &39;blue&39;,
strokeWeight: 2,
strokeOpacity: 0.5
});
map.addOverlay(polygon);
//給點添加點擊事件
marker.addEventListener(&39;click&39;,function(){
alert(marker.toString() + &39;被單擊!&39;);
});
//給面添加點擊事件
polygon.addEventListener(&39;click&39;,function(){
alert(polygon.toString() + &39;被單擊!&39;);
});
如果想研究比較詳細的覆蓋物事件的小伙伴可以自行查看研究
事件-覆蓋物事件
百度地圖API-路線規劃
首先說明一下這個路線規劃分為4種，分別是駕車路線規劃，公交路線規劃，步行路線規劃，以及騎行路線規劃，使用的類是不一樣的，我們一起來看一看。
1. 駕車路線規劃
1.基礎駕車路線規劃服務示例：
代碼如下：
var map = new BMap.Map(&34;container&34;);
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(116.486419, 39.877282);
driving.search(start, end);
2.數據接口
駕車導航服務也提供了豐富的數據接口，通過onSearchComplete回調函數可以得到BMap.DrivingRouteResult對象，它包含了駕車導航結果數據信息。 結果會包含若干駕車方案，每條方案中包含了若干駕車線路。 每條駕車線路又會包含一系列的關鍵步驟（BMap.Step），關鍵步驟描述了具體駕車行駛方案。
var map = new BMap.Map(&34;container&34;);
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var options = {
onSearchComplete: function(results){
if (driving.getStatus() == BMAP_STATUS_SUCCESS){
// 獲取第一條方案
var plan = results.getPlan(0);
// 獲取方案的駕車線路
var route = plan.getRoute(0);
// 獲取每個關鍵步驟，并輸出到頁面
var s = [];
for (var i = 0; i < route.getNumSteps(); i ++) {
var step = route.getStep(i);
console.log(step);
}
}
}
};
var driving = new BMap.DrivingRoute(map, options);
var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(116.486419, 39.877282);
driving.search(start, end);
2. 公交路線規劃
BMap.TransitRoute類提供公交線路規劃服務。
注意：v3.0中，新增了TransitRoutePlan.getTotal 和 TransitRoutePlan.getTotalType方法，可以獲取一條公交換乘方案中總路段數（步行+公交），和指定路段的交通方式類型（步行或公交）。
1.使用服務示例
代碼如下：
var map = new BMap.Map(&34;container&34;);
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var transit = new BMap.TransitRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(116.486419, 39.877282);
transit.search(start, end);
2.進行跨城路線規劃
代碼如下：
var map = new BMap.Map(&34;container&34;);
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var transit = new BMap.TransitRoute(map, {
renderOptions: {
map: map,
autoViewport: true
},
// 配置跨城公交的換成策略為優先出發早
intercityPolicy: BMAP_INTERCITY_POLICY_EARLY_START,
// 配置跨城公交的交通方式策略為飛機優先
transitTypePolicy: BMAP_TRANSIT_TYPE_POLICY_AIRPLANE
});
var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(121.490546, 31.233585);
transit.search(start, end);
3. 步行路線規劃
BMap.WalkingRoute提供步行線路規劃服務。基本用法和駕車線路規劃類似。
使用服務示例
代碼如下：
var map = new BMap.Map(&34;container&34;);
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var walk = new BMap.WalkingRoute(map, {
renderOptions: {map: map}
});
var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(116.486419, 39.877282);
walk.search(start, end);
4. 騎行路線規劃
BMap.RidingRoute提供騎行線路規劃服務，基本用法和步行線路規劃基本相同。
使用服務示例
代碼如下：
var map = new BMap.Map(&34;container&34;);
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var riding = new BMap.RidingRoute(map, {
renderOptions: {map: map}
});
var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(116.486419, 39.877282);
riding.search(start, end);
感興趣的小伙伴可以自行去研究
百度地圖Javascript API 3.0 出行路線規劃 百度地圖JS API示例 路線規劃
感謝諸君的觀看，文中如有紕漏，歡迎在評論區來交流。如果這篇文章幫助到了你，歡迎點贊和關注。