javascript - 如何清除 map 上当前的标记

我正在开发 google api v3 Web 应用程序。加载 map 时，它会使用地理定位服务显示我当前的位置，并在该位置上放置一个标记。现在，当我搜索一个地点或尝试查找两个地点之间的方向时，我想删除之前在 map 上的所有标记，以便当前唯一的标记就是位置起点和终点的标记。但这就是我遇到问题的地方，每当我搜索新位置或尝试获得新方向时，以前的标记，尤其是页面加载时的地理位置标记仍然显示。

我查看了 map 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>

请看一下代码并告诉我哪里出了问题。

最佳答案

我认为这是您尝试删除标记的地方

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

要删除标记，您需要将 map 设置为null，这就是我的做法。

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

关于javascript - 如何清除 map 上当前的标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24698393/

javascript - 如何清除 map 上当前的标记

上一篇：javascript - 使用ajax提交multipart/form-data时，文件为空

下一篇：javascript - 如何在混合应用程序中创建图形