删除自定义标记（Google Maps Directions API）

Question

以下脚本在显示地图方面做得很好，将用户输入作为起点，然后显示自定义图标并使用起点和终点之间的折线绘制路线。

当有人第一次进入一个位置并且路线被绘制在地图上时，这可以正常工作。但是，第二次（以及第三次和第四次）有人选择起始位置时，它会正确绘制新起始位置的图标和路线，但不会删除先前位置的标记。 对于我的生活，我无法弄清楚如何让它删除第一个开始位置标记。

如果有人可以在输入第二个位置时帮助我删除第一个标记，我将不胜感激！

代码如下：

var map;

document.getElementById('route_distance').setAttribute("style", "display: none");

function initMap() {

  var amsterdam = {lat: 52.370216, lng: 4.895168};
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: amsterdam,
    disableDefaultUI: true
  });

  var marker = new google.maps.Marker({
    position: amsterdam,
    icon: '/images/mapicons/dejong-marker-2.svg',
    map: map,
  });

    // Create the DIV to hold the control and call the ZoomControl() constructor
    var zoomControlDiv = document.createElement('div');
    var zoomControl = new ZoomControl(zoomControlDiv, map);

    zoomControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(zoomControlDiv);

    function ZoomControl(controlDiv, map) {

        // Creating divs & styles for custom zoom control
        controlDiv.style.padding = '14px';

        // Set CSS for the control wrapper
        var controlWrapper = document.createElement('div');
        controlWrapper.style.backgroundColor = 'transparent';
        controlWrapper.style.borderStyle = 'none';
        controlWrapper.style.cursor = 'pointer';
        controlWrapper.style.textAlign = 'center';
        controlWrapper.style.width = '20px'; 
        controlWrapper.style.height = '40px';
        controlDiv.appendChild(controlWrapper);

        // Set CSS for the zoomIn
        var zoomInButton = document.createElement('div');
        zoomInButton.style.width = '15px'; 
        zoomInButton.style.height = '15px';
        zoomInButton.style.marginBottom = '20px';
        /* Change this to be the .png image you want to use */
        zoomInButton.style.backgroundImage = 'url("/images/mapicons/plus.svg")';
        controlWrapper.appendChild(zoomInButton);

        // Set CSS for the zoomOut
        var zoomOutButton = document.createElement('div');
        zoomOutButton.style.width = '15px'; 
        zoomOutButton.style.height = '15px';
        zoomOutButton.style.backgroundRepeat = 'no-repeat';
        /* Change this to be the .png image you want to use */
        zoomOutButton.style.backgroundImage = 'url("/images/mapicons/minus.svg")';
        controlWrapper.appendChild(zoomOutButton);

        // Setup the click event listener - zoomIn
        google.maps.event.addDomListener(zoomInButton, 'click', function() {
        map.setZoom(map.getZoom() + 1);
        });

        // Setup the click event listener - zoomOut
        google.maps.event.addDomListener(zoomOutButton, 'click', function() {
        map.setZoom(map.getZoom() - 1);
        });  

    }

    var directionsService = new google.maps.DirectionsService;
    new AutocompleteDirectionsHandler(map);

    return map;
}

function AutocompleteDirectionsHandler(map) {
    var directionmarker = '/images/mapicons/start_icon.svg';
    this.map = map;
    this.originPlaceId = null;
    this.destinationPlaceId = 'ChIJVXealLU_xkcRja_At0z9AGY';
    this.travelMode = 'DRIVING';
    this.UnitSystem = 'METRIC';
    this.departure_time = 'now';
    var originInput = document.getElementById('origin-input');
    this.directionsService = new google.maps.DirectionsService;
    this.directionsDisplay = new google.maps.DirectionsRenderer({
      suppressMarkers: true,
      map: map,
      polylineOptions: {
        strokeColor: "#004996",
        strokeWeight: "4",
      },
        suppressInfoWindows: true,
    });
    this.directionsDisplay.setMap(map);
    var originAutocomplete = new google.maps.places.Autocomplete(
    originInput, {
        placeIdOnly: true
    });
    this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
}

// Sets a listener when the input fields to change the filter type on Places Autocomplete.
AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) {
    var me = this;
    autocomplete.bindTo('bounds', this.map);
    autocomplete.addListener('place_changed', function() {
        var place = autocomplete.getPlace();
        if (!place.place_id) {
            window.alert("Select an option from the list.");
            return;
        }
        if (mode === 'ORIG') {
            me.originPlaceId = place.place_id;
        } else {
            me.destinationPlaceId = place.place_id;
        }
        me.travelMode = 'DRIVING';
        me.route();
    });
};

AutocompleteDirectionsHandler.prototype.route = function() {
    if (!this.originPlaceId || !this.destinationPlaceId) {
        return;
    }
    var me = this;
    this.directionsService.route({
        origin: { 'placeId': this.originPlaceId },
        destination: { 'placeId': this.destinationPlaceId },
        travelMode: this.travelMode,
    }, function(response, status) {
        if (status === 'OK') {
            var theDistance = Math.round((response.routes[0].legs[0].distance.value) / 1000) + ' KM';
            var theTime = Math.round((response.routes[0].legs[0].duration.value) / 60) + ' min';
            document.getElementById('route_distance').setAttribute("style", "display: inline");
            document.getElementById('route_distance').innerHTML = theDistance + ' ~ ' + theTime;
            me.directionsDisplay.setDirections(response);
            var route_start = response.routes[0].legs[0].start_location;
            var marker = new google.maps.Marker({
                position: route_start,
                map: map,
                icon: '/images/mapicons/start-icon.svg',
                zIndex: 5
            });
        } else {
            window.alert('Could not display route: ' + status);
        }
    });
};

Answer 1

尝试保存对您要删除的所有已创建标记的引用。创建一个标记数组，该数组将包含对所创建的所有标记的引用。

var markers = [];

添加标记时，在标记数组上保存引用而不是var marker = new google.m...

markers.push(new google.maps.Marker({
    position: route_start,
    map: map,
    icon: '/images/mapicons/start-icon.svg',
    zIndex: 5
}));

创建一个循环标记数组并将地图设置为 null（删除）的方法，并在需要时创建此方法。

function removeMarkers() {
    for (var i in markers) {
        markers[i].setMap(null);
    }
    markers = [];
}