javascript - 删除自定义标记(Google map 方向 API)

Question

下面的脚本在显示 map 、获取用户输入的起始位置、然后显示自定义图标并使用起始点和目的地之间的折线绘制路线方面做得很好。

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

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

代码如下:

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 = [];

添加标记时，不要保存 varmarker = new google.m... 对标记数组的引用

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

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

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