从谷歌地图v3中删除最后添加的标记

removing last added marker from google maps v3

本文关键字:添加 最后 删除 谷歌地图 v3      更新时间:2023-09-26

我正在开发一个使用谷歌地图v3的网站,有了它,您可以导航到特定位置

网站 - http://dev.fama.net.pl/walendia/lokalizacja.html

在网站顶部的输入上键入"什切青",然后单击提交 - 地图上将出现一个标记,然后键入"Warszawa" - 新标记将出现在地图上,但旧标记仍然存在,如何从地图中删除以前的标记

谷歌地图代码

var map;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var geocoder = new google.maps.Geocoder();
var stepDisplay;
var markersArray = [];
var iconSize = new google.maps.Size(158,59);
var iconOrigin = new google.maps.Point(0,0);
var iconAnchor = new google.maps.Point(20,59);
function initialize(center, zoom) {
    directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
    var mapOptions = {
        zoom: zoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.TOP_RIGHT
        }
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));
    geocoder.geocode({address: center}, function(results, status) {
        map.setCenter(results[0].geometry.location);
    });
}
function addMarker(location, icon) {
    geocoder.geocode({address: location}, function(results, status) {
        marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            icon: icon
        });
        google.maps.event.addListener(marker);
        markersArray.push(marker);
    });
}
function addMarker2(position, icon) {
    var location = new google.maps.LatLng(52.08901624831595, 20.854395031929016);
    var icon = {
        url: 'http://dev.fama.net.pl/walendia/img/markers/end.png',
        size: iconSize,
        origin: iconOrigin,
        anchor: iconAnchor
    }   
    marker = new google.maps.Marker({
        position: location,
        map: map,
        icon: icon
    });
    markersArray.push(marker);
}
function calcRoute(start, end) {
    var start = start;
    var end = end;
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            var location = start;
            var icon = {
                url: 'http://dev.fama.net.pl/walendia/img/markers/start.png',
                size: iconSize,
                origin: iconOrigin,
                anchor: iconAnchor
            }
            addMarker(location, icon);
            addMarker2(location, icon);
            directionsDisplay.setDirections(result);
        }
    });    
}
// SET CENTER ON RESIZE
google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
    directionsDisplay.setMap(map);
});
$(document).ready(function() {
    $('.form-box form').submit(function() {
        var start = $(this).find('input[name="start"]').val();
        var end = new google.maps.LatLng(52.08901624831595, 20.854395031929016);
        directionsDisplay.setMap(map);
        calcRoute(start, end);
        return false;
    });
});

网页代码

$(document).ready(function() {
    initialize('Łączności 131, 05-552 Łazy, Polska', 10);
    addMarker2(location);
});

在添加第二个标记之前,您需要从markersArray中删除标记。使用以下函数从数组中删除标记。

function deleteMarkers() {
  if (markersArray) {
   for (i=0; i < markersArray.length; i++) {
        markersArray[i].setMap(null);
    }
markersArray.length = 0;
}
}

演示小提琴

注意:我只是拿了一些样本来删除并在您单击按钮时显示标记。根据您的要求使用这些函数。