百度地圖API——多點路徑連線問題

本文系作者 chaoCode原創，轉載請私信並在文章開頭附帶作者和原文地址鏈接。

違者，作者保留追究權利。

前言

本文是對於在項目應用有遇到的多點連線問題，我的一些解決方式，以及對於之前所學習的一些百度地圖API基本使用的一個小結。
如果有小伙伴沒有看過之前的百度地圖API基本使用（一）｜8月更文挑戰，百度地圖API基本使用（二）｜8月更文挑戰，百度地圖API基本使用（三）,可以先去觀看一下，前期所需要的一些准備，以及一些基本的用法。

感興趣的小伙伴可以自行查看百度地圖官方提供的文檔
百度地圖開放平台開發文檔中的JavaScript API

也可以通過下方示例中心更直觀的看到百度地圖API的一些使用，以及它的一些特性
百度地圖開放平台-示例中心

想深入研究百度地圖avaScript API 3.0方法參數信息的話，可以通過下方類參考
百度地圖avaScript API v3.0類參考
另外不同版本的API可以自行在開發文檔中的類參考類目中找到,請自行查找

應用場景：

簡單來說就是點覆蓋物需要自定義圖片，以及實現點擊點覆蓋物實現多點路徑連線並且添加順序編號。以及將這些數據返回到后端入庫。以及根據后端數據進行回顯操作

好的根據我所描述的這個需求，我們就可以回想之前學習的百度地圖API，有哪些在這里是我們所需要的。
1.百度地圖API基本使用（一）｜8月更文挑戰中的創建加載地圖。
2.百度地圖API基本使用（二）｜8月更文挑戰中的創建點覆蓋物，點覆蓋單擊事件。
3.百度地圖API基本使用（三）中的路線規划模塊中講的一些連線操作

回想了一下我們所需要的知識點，那么我們開始進入實操階段。

1.創建和加載地圖。

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.由於我們是要通過點擊點覆蓋物去實現，路線規划陸續連接起來，所以講路線規划放在了點擊事件中。本次使用的是
WalkingRoute，也就是步行路線規划導航實例。

目前這個還有一些紕漏，簡單的實現，如果小伙伴們有更好的方案，可以評論區交流學習。

var PonitData = [ [116.404, 39.94],[116.404, 39.95],[116.404, 39.96],[116.404, 39.97]];
//總的點擊點覆蓋集合
var plan_points=[];
//兩個點連線的集合，每次連完線之后，留下后一個
var points =[];
//使用each去循環渲染點覆蓋物
$.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), {
        // 指定定位位置。
        // 當標注顯示在地圖上時，其所指向的地理位置距離圖標左上
        // 角各偏移10像素和25像素。您可以看到在本例中該位置即是
        // 圖標中央下端的尖角位置。
        //anchor: new BMap.Size(23, 25),
        // 設置圖片偏移。
        // 當您需要從一幅較大的圖片中截取某部分作為標注圖標時，您
        // 需要指定大圖的偏移位置，此做法與css sprites技術類似。
        //imageOffset: new BMap.Size(0, 0 - index * 25)   // 設置圖片偏移
    });
    // 創建標注對象並添加到地圖
    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);
            }
            //點擊點的時候獲取點在數組中所在的位置
            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顯示為該點覆蓋物在數組中的下標+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);
            //禁用自動調整地圖層級
            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];
                //設置自定義圖片，覆蓋掉路線規划的時候的起點和重點圖片，使用的是和點覆蓋物一樣的圖片
                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);
                });
                //發起檢索
                walking.search(start, end);
                //兩個點連線的集合置空
                points = [];
                //添加最后一個進入數組
                points.push(end);
            }
        }
    });

感興趣的小伙伴可以自行去研究,或者在評論區提問交流。
百度地圖Javascript API 3.0 出行路線規划
百度地圖JS API示例 路線規划
百度地圖avaScript API v3.0類參考

感謝諸君的觀看，文中如有紕漏，歡迎在評論區來交流。如果這篇文章幫助到了你，歡迎點贊👍和關注。