Question

新的Plunker演示：http://plnkr.co/edit/6tmesHnvN0onjJWBwZJX

＆＃13;

//Source and destination auto complete textbox binding
 google.maps.event.addDomListener(window, 'load', function () {
        var places = new google.maps.places.Autocomplete(document.getElementById('source'));
        google.maps.event.addListener(places, 'place_changed', function () {
            var place = places.getPlace();
            sourceLat = place.geometry.location.lat();
            sourcelng = place.geometry.location.lng();
        });
        var places1 = new google.maps.places.Autocomplete(document.getElementById('destination'));
        google.maps.event.addListener(places1, 'place_changed', function () {
            var place1 = places1.getPlace();
        });
    });

var cnt = 1; var v = [];var autocomplete = [];
   var map = null;var usedIds = [];
    var insertControls = [];
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
     var map;
    var sourceLat, sourcelng; var maxNumberOfTextboxAllowed = 5;
    var autocompleteOptions = {
        componentRestrictions: { country: "in" }
    };

 function initialize() {
       
        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapCenter = new google.maps.LatLng(sourceLat, sourcelng); //to center google map location on my source points.
        var mapOptions = {
            zoom: 10,
            center: mapCenter
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        directionsDisplay.setMap(map);
    }

    google.maps.event.addDomListener(window, 'load', initialize);


//My method to dynamically generate textbox

 function GenerateSourceDestinationPoint() {
            if (cnt <= maxNumberOfTextboxAllowed) {
                var id = findAvailableId();
                var OrderingField = $("<div class='OrderingField' id='OrderingField" + id + "'/>");
                var LeftFloat = $("<div class='LeftFloat' id='LeftFloat" + id + "'/>");
                var RightFloatCommands = $("<div class='RightFloat Commands' id='RightFloat Commands" + id + "'/>");
                var upButton = $("<button id='navigate' value='up'>Up</button>");
                var downButton = $("<button id='navigate' value='down'>Down</button>");
                var fName = $("<input type='text' class='fieldname' id='Txtopt" + id + "'  name='TxtoptNm" + id + "'/>");
                var removeButton = $("<img class='remove' src='../remove.png' />");
                LeftFloat.append(fName);
                LeftFloat.append(removeButton);
                RightFloatCommands.append(upButton);
                RightFloatCommands.append(downButton);
                OrderingField.append(LeftFloat);
                OrderingField.append(RightFloatCommands);
                $("#FieldContainer").append(OrderingField);
                 var newInput = [];
            var newEl = document.getElementById('Txtopt' + id);
            var txtboxId = 'Txtopt' + id;
            newInput.push(newEl);
            setupAutocomplete(autocomplete, newInput, 0, txtboxId);
                cnt = cnt + 1;
            }
            else
                alert("Cant create more than 5 points")
        }

//Auto complete function bind to dynamic textbox

function setupAutocomplete(autocomplete, inputs, i,txtboxId) {
            insertControls.push(txtboxId)
        autocomplete.push(new google.maps.places.Autocomplete(inputs[i], autocompleteOptions));
        var idx = autocomplete.length - 1;
            google.maps.event.addListener(autocomplete[idx], 'place_changed', function () {
                if (marker[idx] && marker[idx].setMap) {
                    marker[idx].setMap(null);
                    marker[idx] = null;
                }
                marker[idx] = new google.maps.Marker({
                    map: map,
                    icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + '|FF776B|000000'

                });
                marker[idx].setVisible(false);
                var place = autocomplete[idx].getPlace();
                if (!place.geometry) {
                    return;
                }
                marker[idx].setPosition(place.geometry.location);
                marker[idx].setVisible(true);
                 var auto = document.getElementById(insertControls[idx]).value;
                 v.push(auto);
                 calcRoute();
            });
        }



//when generating new textbox i will use this function to find already removed textbox id.For eg if i have remove textbox 3 then i will assign Txtopt3 to this newly generated textbox.
  function findAvailableId() {
        var i = 1;
        while (usedIds[i]) i++;
        usedIds[i] = true;
        return i;
    };

    function removeId(idToRemove) {
        usedIds[idToRemove] = false;
    };
    //method to remove textbox from Dom
    $(document).on('click', "img.remove", function () {
            $(this).parent().parent().fadeOut(1000, function () {
                if (cnt > maxNumberOfTextboxAllowed)
                    cnt = cnt - 2;
                else if (cnt == 1)
                    cnt = 1;
                else
                    cnt = cnt - 1;
                var id = $(this).attr("id").substr(13);
                DeleteMarkers(id)
                removeId(id);
                $(this).remove();

            });
        });

//This function will be call when i will remove any route point from dynamic textbox and here i will remove that point from my v array and again i will re-draw my map from source and destination.
 function DeleteMarkers(id) {
        var removeMarker = id - 1;
        for (var i = 0; i < v.length; i++) {
            if (i == removeMarker) {
                v.splice(i, 1);
            }
        }
        calcRoute();
    }

//function to draw my route from source to destination connecting all way points
 function calcRoute() {
        var start = document.getElementById('source').value;
        var end = document.getElementById('destination').value;
        var waypts = [];
        var request = null;

        if (v.length != 0) {
            for (var i = 0; i < v.length; i++) {
                waypts.push({
                    location: v[i],
                    stopover: true
                });
            }
            request = {
                origin: start,
                destination: end,
                optimizeWaypoints: true,
                waypoints: waypts,
                travelMode: google.maps.TravelMode.DRIVING
            };
        }
        else {
            request = {
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING
            };
        }
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                var route = response.routes[0];
            }
        });
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places,geometry"></script>
<input id="maptype" type="hidden" value="roadmap" />
    <input type="button" onclick="calcRoute()" value="View on Google Map" />

    <br /><br />
    <label>Source</label>
    <input type="text" value="" name="source" id="source">
    <br /><br />
    <label>Destination</label>
    <input type="text" value="" name="destination" id="destination">
    <br /><br />
    <button onclick="GenerateSourceDestinationPoint()" class="btn btn-primary" type="button" >Add Points</button>
    <div style="border: 1px solid -moz-nativehyperlinktext;"></div>
    <div id="FieldContainer">
    </div>

    <br /><br />
    <div style="height:400px;width:1000px">
        <div id="map_canvas"></div>
    </div>

＆＃13;

我使用谷歌地图定义来源和目的地。

现在，在此源和目标用户之间可以在源和目标之间添加5个点。

表示例如：

来源洛杉矶
目的地芝加哥

在此源和目标用户之间可以添加5个位于洛杉矶和芝加哥之间的任何点（仅限城市）。

我有两个文本框：

来源（谷歌自动完成功能）
目的地（谷歌自动完成功能）

添加路线点我动态生成5个文本框，所有文本框都具有谷歌自动完成功能。（此功能可能会扩展，因此流程是动态的）：

当用户输入来源和目的地并点击按钮在Google地图上查看按钮时，我将显示来源和目的地之间的路径。

注意：输入源和目的地后，您必须单击此处在plunker链接中在谷歌地图上查看的按钮。

现在，此用户将为这些动态生成的文本框定义5个路由点，并且我将在源和目标的路径上显示此路由点。

到目前为止，我已成功地在源路径和目标路径上显示我的路由点，但唯一的问题是当我删除任何路由点时，我无法从源路径和目标路径中删除该点。

它仍然存在于带有标记的源和目标路径上。

现在当我删除任何路线点时，标记不会从中删除路径点虽然路径正确更新。

见下面的截图：

Answer 1

根据the documentation on waypoints，

允许的最大航点为8 ，加上原点和目的地。 Google Maps API for Work客户可以使用23个航点，以及原点和目的地。公交路线不支持航点。

这可以解释为什么你的程序在处理了太多航路点时开始行为异常的原因;您的应用程序未正确删除旧的航点，因此它的配额用完了，行为不端。

简而言之，您面临的问题应该是由用于管理航点的错误逻辑引起的，修复航点逻辑也应该解决这个问题。希望它有所帮助。

Answer 2

它正常工作，我现在将标记符更改为第一个marker[idx].setVisible(true);，第二个更改为marker[idx].setVisible(false);，运行代码

谷歌地图方式指向不使用方向服务删除

2 个答案: