本文系作者 chaoCode原創(chuàng)襟雷，轉(zhuǎn)載請私信并在文章開頭附帶作者和原文地址鏈接耸弄。
違者卓缰，作者保留追究權(quán)利。
前言
本文是對于在項目應(yīng)用有遇到的多點連線問題震叮，我的一些解決方式苇瓣，以及對于之前所學(xué)習(xí)的一些百度地圖API基本使用的一個小結(jié)偿乖。
如果有小伙伴沒有看過之前的百度地圖API基本使用（一）｜8月更文挑戰(zhàn)哲嘲，百度地圖API基本使用（二）｜8月更文挑戰(zhàn)眠副，百度地圖API基本使用（三）,可以先去觀看一下竣稽，前期所需要的一些準備毫别，以及一些基本的用法。
感興趣的小伙伴可以自行查看百度地圖官方提供的文檔
百度地圖開放平臺開發(fā)文檔中的JavaScript API
也可以通過下方示例中心更直觀的看到百度地圖API的一些使用台丛，以及它的一些特性
百度地圖開放平臺-示例中心
想深入研究百度地圖avaScript API 3.0方法參數(shù)信息的話砾肺，可以通過下方類參考
百度地圖avaScript API v3.0類參考
另外不同版本的API可以自行在開發(fā)文檔中的類參考類目中找到,請自行查找
應(yīng)用場景：
簡單來說就是點覆蓋物需要自定義圖片变汪，以及實現(xiàn)點擊點覆蓋物實現(xiàn)多點路徑連線并且添加順序編號。以及將這些數(shù)據(jù)返回到后端入庫实胸。以及根據(jù)后端數(shù)據(jù)進行回顯操作
好的根據(jù)我所描述的這個需求童芹，我們就可以回想之前學(xué)習(xí)的百度地圖API鲤拿，有哪些在這里是我們所需要的署咽。
1.百度地圖API基本使用（一）｜8月更文挑戰(zhàn)中的創(chuàng)建加載地圖宁否。
2.百度地圖API基本使用（二）｜8月更文挑戰(zhàn)中的創(chuàng)建點覆蓋物，點覆蓋單擊事件饱须。
3.百度地圖API基本使用（三）中的路線規(guī)劃模塊中講的一些連線操作
回想了一下我們所需要的知識點蓉媳，那么我們開始進入實操階段。
1.創(chuàng)建和加載地圖酪呻。
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.399, 39.910), 15);
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.NavigationControl());
2.舉個例子隨便給了4個點减宣，然后這個時候需要修改點覆蓋物的圖片，并添加點擊事件玩荠。
3.由于我們是要通過點擊點覆蓋物去實現(xiàn)漆腌，路線規(guī)劃陸續(xù)連接起來，所以講路線規(guī)劃放在了點擊事件中阶冈。本次使用的是
WalkingRoute闷尿，也就是步行路線規(guī)劃導(dǎo)航實例。
目前這個還有一些紕漏眼溶，簡單的實現(xiàn)悠砚，如果小伙伴們有更好的方案，可以評論區(qū)交流學(xué)習(xí)堂飞。
var PonitData = [ [116.404, 39.94],[116.404, 39.95],[116.404, 39.96],[116.404, 39.97]];
//總的點擊點覆蓋集合
var plan_points=[];
//兩個點連線的集合，每次連完線之后绰筛，留下后一個
var points =[];
//使用each去循環(huán)渲染點覆蓋物
$.each(PonitData, function (item, value) {
var point =new BMap.Point(value[0], value[1]);
//自定義圖片var myIcon = new BMap.Icon(圖片路徑, new BMap.Size(23, 25), {});
var myIcon = new BMap.Icon("images/marker.png", new BMap.Size(23, 25), {
// 指定定位位置枢泰。
// 當(dāng)標注顯示在地圖上時，其所指向的地理位置距離圖標左上
// 角各偏移10像素和25像素铝噩。您可以看到在本例中該位置即是
// 圖標中央下端的尖角位置衡蚂。
//anchor: new BMap.Size(23, 25),
// 設(shè)置圖片偏移。
// 當(dāng)您需要從一幅較大的圖片中截取某部分作為標注圖標時骏庸，您
// 需要指定大圖的偏移位置毛甲，此做法與css sprites技術(shù)類似。
//imageOffset: new BMap.Size(0, 0 - index * 25) // 設(shè)置圖片偏移
});
// 創(chuàng)建標注對象并添加到地圖
var marker = new BMap.Marker(point);
marker.setIcon(myIcon);
map.addOverlay(marker);
//給點覆蓋物添加點擊事件
marker.addEventListener("click", function (e)
{
var planPointFlage=false;
if (plan_points.length>0){
$.each(plan_points, function (item, value) {
console.log(value);
if (value.lng==point.lng && value.lat==point.lat){
planPointFlage = true;
planPonitIndex=item;
}
});
}
var pointFlage=false;
if (points.length>0) {
$.each(points, function (item, value) {
if (value.lng == point.lng && value.lat == point.lat) {
pointFlage = true;
}
});
}
if(!planPointFlage){
plan_points.push(point);
if(!pointFlage){
points.push(point);
}
//點擊點的時候獲取點在數(shù)組中所在的位置
var planPonitIndex=-1;
if (plan_points.length>0){
$.each(plan_points, function (item, value) {
if (value.lng==point.lng && value.lat==point.lat){
planPonitIndex=item;
}
});
}
//配置label顯示為該點覆蓋物在數(shù)組中的下標+1具被，表示這個點是第幾個玻募，以及點坐標，字的位置一姿。
var lab1 = new BMap.Label(planPonitIndex + 1, { position: point, offset: new BMap.Size(-7, -12) });
//配置label的一些樣式
lab1.setStyle({
color: "#fff",
fontSize: "16px",
backgroundColor: "0.05",
border: "0",
fontWeight: "bold"
});
marker.setLabel(lab1);
map.addOverlay(marker);
//禁用自動調(diào)整地圖層級
walking.disableAutoViewport();
var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } });
if (points.length === 2) {
var start =points[0];
var end = points[1];
//設(shè)置自定義圖片七咧，覆蓋掉路線規(guī)劃的時候的起點和重點圖片，使用的是和點覆蓋物一樣的圖片
var startIcon = new BMap.Icon("images/marker.png", new BMap.Size(23, 25));
walking.setMarkersSetCallback(function(result){
//覆蓋起點的圖片
result[0].marker.setIcon(startIcon);
//覆蓋終點
result[1].marker.setIcon(startIcon);
});
//發(fā)起檢索
walking.search(start, end);
//兩個點連線的集合置空
points = [];
//添加最后一個進入數(shù)組
points.push(end);
}
}
});
感興趣的小伙伴可以自行去研究,或者在評論區(qū)提問交流叮叹。
百度地圖Javascript API 3.0 出行路線規(guī)劃
百度地圖JS API示例 路線規(guī)劃
百度地圖avaScript API v3.0類參考
感謝諸君的觀看艾栋，文中如有紕漏，歡迎在評論區(qū)來交流蛉顽。如果這篇文章幫助到了你蝗砾，歡迎點贊??和關(guān)注。
