如何清除當前在地圖上的標記

我有一個谷歌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 ------------------------------- -----------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Google Direct</title> 
<link rel="stylesheet" href="css/style.css" /> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
</head> 

<body> 


    <div id="control"> 
     <strong>Start:</strong> 
     <input id="start" type="text" /> 
     <strong>End:</strong> 
     <input id="end" type="text" /> 
     <button id="search">Find place</button> 
    </div> 
    <div id="directions-panel"></div> 
    <div id="map-canvas"></div> 
    <script src="js/jquery-1.9.1.js"></script> 
    <script src="js/maps.js"></script> 
</body> 
</html>

請看看代碼並告訴我哪裏出錯了。

來源

2014-07-11 user3775998

我認爲這是你想刪除標記

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

來源

2014-07-11 13:11:36 Smeegs

如何清除當前在地圖上的標記

回答

相關問題