本文系作者 chaoCode原創，轉載請私信並在文章開頭附帶作者和原文地址鏈接。
違者，作者保留追究權利。
前言
PS：我所使用的的是百度地圖Javascript API 3.0
本文是對之前使用的延續，繼續對百度地圖API的一些使用去做歸納和總結，本次主要是對地圖上的事件以及路線規划做下一下介紹，如果有小伙伴沒有看過之前的百度地圖API基本使用（一）｜8月更文挑戰，百度地圖API基本使用（二）｜8月更文挑戰，可以先去觀看一下，前期所需要的一些准備，以及一些基本的用法。
感興趣的小伙伴可以自行查看百度地圖官方提供的文檔
百度地圖開放平台開發文檔中的JavaScript API
也可以通過下方示例中心更直觀的看到百度地圖API的一些使用，以及它的一些特性
百度地圖開放平台-示例中心
想深入研究百度地圖avaScript API 3.0方法參數信息的話，可以通過下方類參考
百度地圖avaScript API v3.0類參考
另外不同版本的API可以自行在開發文檔中的類參考類目中找到,請自行查找
不過要注意：實例中心使用的是BMap去創建容器的，最新版GL地圖命名空間為BMapGL, 可按住鼠標右鍵控制地圖旋轉、修改傾斜角度。
BMapGL在引入API的方式如下：
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=您的密鑰"></script>
BMap在引入API的方式如下：
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script>
按照你自己的需求去引用
好的，廢話不多說，開整
百度地圖API-事件
1. 地圖事件
1.地圖加載完成事件
這個事件顧名思義就是在地圖加載完成之后會調用這個事件，我們可以去做一些操作。
var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.404, 39.928), 15);
map.enableScrollWheelZoom(true);
map.addEventListener('tilesloaded', function () {
alert('地圖加載完成！');
});
實現的效果就是在地圖加載完成之后，會彈出地圖加載完成的提示！實際應用的時候可以能就會涉及到一些基於地圖的初始化操作。具體情況具體分析，就不做過多贅述了。
2.地圖單擊事件
這個事件顧名思義就是在當我們鼠標點擊地圖上的時候，就會觸發這個事件。
var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.404, 39.928), 15);
map.enableScrollWheelZoom(true);
map.addEventListener('click', function (e) {
alert('點擊位置經緯度：' + e.latlng.lng + ',' + e.latlng.lat);
});
我們實現的這個就是單擊地圖的時候就會觸發，可以獲取到這個點的經緯度等信息。以及我們之前有介紹的覆蓋物的一些觸發事件，基本上都是使用的是這個單擊事件，使用addEventListener監聽click去實現的，這個方法還有監聽別的事件，就不一一舉例了，給大家看一下有哪些事件可以監聽，這些都是從官方提供的類參考中找到的。
3.注銷事件
這個注銷方法也比較簡單，上一個點擊事件我們使用的是addEventListener監聽click去實現的，這個注銷實際上就是移除這個事件，類似於之前的刪除覆蓋類都是使用的remove這個字段，對應的就是removeEventListener監聽click去刪除這個點擊事件實現的。
var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.404, 39.928), 15);
map.enableScrollWheelZoom(true);
function showInfo(e) {
alert('經緯度：' + e.latlng.lng + ',' + e.latlng.lat);
}
// 添加地圖點擊事件
function addMapEvent() {
map.addEventListener('click', showInfo);
}
// 移除地圖點擊事件
function removeMapEvent() {
map.removeEventListener('click', showInfo);
}
如果想研究比較詳細的地圖事件的小伙伴可以自行查看研究
事件-地圖事件
2. 覆蓋物事件
1.覆蓋物鼠標事件
這個覆蓋物鼠標事件實質就是地圖的點擊事件，只不過對象換成了覆蓋物對象，本質都是使用addEventListener去監聽事件的發生。
創建一個點和一個面覆蓋物，然后去給這兩個覆蓋物添加鼠標點擊事件
var map = new BMap.Map('container');
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: 'blue',
strokeWeight: 2,
strokeOpacity: 0.5
});
map.addOverlay(polygon);
//給點添加點擊事件
marker.addEventListener('click',function(){
alert(marker.toString() + '被單擊!');
});
//給面添加點擊事件
polygon.addEventListener('click',function(){
alert(polygon.toString() + '被單擊!');
});
如果想研究比較詳細的覆蓋物事件的小伙伴可以自行查看研究
事件-覆蓋物事件
百度地圖API-路線規划
首先說明一下這個路線規划分為4種，分別是駕車路線規划，公交路線規划，步行路線規划，以及騎行路線規划，使用的類是不一樣的，我們一起來看一看。
1. 駕車路線規划
1.基礎駕車路線規划服務示例：
代碼如下：
var map = new BMap.Map("container");
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("container");
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("container");
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("container");
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("container");
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("container");
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示例 路線規划
感謝諸君的觀看，文中如有紕漏，歡迎在評論區來交流。如果這篇文章幫助到了你，歡迎點贊👍和關注。