Как очистить маркеры в настоящее время на карте

Я работаю над веб-приложением google api v3. Когда карта загружается, она показывает мое текущее местоположение, используя службу геолокации, и маркер помещается в это место. Теперь, когда я ищу место или пытаюсь найти направление между двумя местами, я хочу удалить все маркеры, которые были ранее на карте, так что единственными текущими маркерами будут те, которые указаны для начальной и конечной точек местоположения, Но это то, где у меня проблемы, в любое время, когда я ищу новое место или пытаюсь получить новое направление, предыдущие маркеры, особенно те, что указаны для геолокации при загрузке страницы, все еще отображаются.

Я посмотрел на карты api, и я увидел маркерный массив, который они использовали для удаления предыдущих маркеров. Я поместил это в свой код, и он все еще не работает. Я вставлю свой код, чтобы вы могли сами убедиться.

---------------------------------MAPS.JS -----------------------------------------

var directionsDisplay;
var geocoder;
var map;
var markers = [];
var directionsService = new google.maps.DirectionsService();

function initialize() {
 directionsDisplay = new google.maps.DirectionsRenderer();
 geocoder = new google.maps.Geocoder();

 var mapOptions = {
 zoom: 15
 };
 map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 // Try HTML5 geolocation
 if(navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(function(position) {
 var pos = new google.maps.LatLng(position.coords.latitude,
 position.coords.longitude);

 var marker = new google.maps.Marker({
 position: pos,
 map: map
 });

 markers.push(marker);
 map.setCenter(pos);
 }, function() {
 handleNoGeolocation(true);
 });
 } else {
 // Browser doesn't support Geolocation
 handleNoGeolocation(false);
 }

 directionsDisplay.setMap(map);
 directionsDisplay.setPanel(document.getElementById('directions-panel'));

 var control = document.getElementById('control');
 control.style.display = 'block';
 map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
}


function calcRoute(start, end) {
 var 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);
 }
 });
}

function handleNoGeolocation(errorFlag) {
 if (errorFlag) {
 var content = 'Error: The Geolocation service failed.';
 } else {
 var content = 'Error: Your browser doesn\'t support geolocation.';
 }

 var options = {
 map: map,
 position: new google.maps.LatLng(60, 105),
 content: content
 };

 var infowindow = new google.maps.InfoWindow(options);
 map.setCenter(options.position);
}

$("#search").click(function() {
 var start = $.trim($("#start").val());
 var end = $.trim($("#end").val());
 if (start==="" && end === "") {
 alert("Enter a valid address");
 } 
 else {
 if (end.length === 0)
 searchPlace(start);
 else
 calcRoute(start, end);
 }

});

//search for a place
function searchPlace(start) {
 geocoder.geocode( { 'address': start}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 setAllMap(null);
 map.setCenter(results[0].geometry.location);
 var marker = new google.maps.Marker({
 map: map,
 position: results[0].geometry.location
 });
 markers.push(marker);
 } else {
 alert("Geocode was not successful for the following reason: " + status);
 }
 });
}

//remove all current markers that are on the map
function setAllMap(map) {
 for (var i = 0; i < markers.length; i++) {
 markers[i].setMap(map);
 }
}



google.maps.event.addDomListener(window, 'load', initialize);

----------------------------INDEX. HTML------------------------------------------------

<title>Google Direct</title>







 <div id="control">
 <span>Start:</span>
 
 <span>End:</span>
 
 <button id="search">Find place</button>
 </div>

Пожалуйста, взгляните на код и скажите мне, где это происходит.

1 ответ

Я предполагаю, что это то, где вы пытаетесь удалить маркеры

//remove all current markers that are on the map
function setAllMap(map) {
 for (var i = 0; i < markers.length; i++) {
 markers[i].setMap(map);
 }
}

Чтобы удалить маркер, вам нужно установить карту в null, вот как я это делаю.

function RemoveAllMarkers() {
 while (markers.length > 0) {
 markers.pop().setMap(null);
 }
 markers.length = 0;
}

licensed under cc by-sa 3.0 with attribution.