javascript - 谷歌地图路点不使用方向服务删除

Question

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

//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];
            }
        });
    }

<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>

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

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

例如:

1. 来源是洛杉矶
2. 目的地是芝加哥

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

我有两个文本框:

• 来源(谷歌自动完成功能)
• 目的地(谷歌自动完成功能)

为了添加路线点，我动态生成 5 个文本框，所有文本框都具有谷歌自动完成功能。(此功能可能会扩展，因此过程是动态的):

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

Note:After entering source and destination you have to click on this button that is View on Google Map in plunker link.

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

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

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

Now when i delete any route point then marker is not removing from the way points though path is updated correctly.

见下图:

Answer 1

它的工作原理，我在 markerids 处将第一个更改为 marker[idx].setVisible(true);，将第二个更改为 marker[idx].setVisible(false); 现在，运行你的代码