前言

本文是對于在專案應用有遇到的多點連線問題，我的一些解決方式，以及對于之前所學習的一些百度地圖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 = https://www.cnblogs.com/code-monkey-007/p/[ [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類參考

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/308402.html

標籤：jQuery

上一篇：百度地圖API基本使用（三）

下一篇：jQuery-01

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

前言

應用場景：