每次单击事件发生时，删除从对象添加的标记

Question

我的代码接受两个输入，地址和距离，然后通过包含位置的数组进行迭代，如果位置在距离内，则在地图上放置标记。当我开始新的搜索时，我想从地图中删除所有以前的标记。我的代码只删除了一个标记，这是用户提供的地址，我错过了什么？

＆＃13;

＆＃13;

//Array of all map markers
var markers = [];

// Loading Map
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 54.188, lng: -2.878},
    zoom: 6
  });

//Creating a Geocoder object
  var geocoder = new google.maps.Geocoder();

//Calling a 
  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
  });
  
  //Geocoding function
function geocodeAddress(geocoder, resultsMap) {
//Removing all markers form the map each time this function is called  
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
    markers = [];
  }
  var address = document.getElementById('address').value;
  var distance = document.getElementById('distance').value;
  geocoder.geocode({'address': address}, function(results, status) {
    if (status === 'OK') {
      resultsMap.setCenter(results[0].geometry.location);
      var userMarker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location,
        icon: 'img/bluedot.png'
      });
      markers.push(userMarker);
//Creating track markers
      for (var i = 0; i < mxTracks.length; i++) {
        var trackMarker = new google.maps.Marker({
          position: new google.maps.LatLng(mxTracks[i][2], mxTracks[i][3])
        });
        markers.push(trackMarker);
//If markers are within a set distance add them to a map
        if (google.maps.geometry.spherical.computeDistanceBetween(userMarker.getPosition(), trackMarker.getPosition()) < parseInt(distance) * 1609.34) {
          trackMarker.setMap(resultsMap);
        }
      }  
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的代码中有拼写错误：

//Removing all markers form the map each time this function is called  
for (var i = 0; i < markers.length; i++) {
  markers[i].setMap(null);
  markers = [];
}

删除第一个标记，然后将markers数组设置为[];您想要处理整个数组，然后将其设置为[]。

//Removing all markers form the map each time this function is called  
for (var i = 0; i < markers.length; i++) {
  markers[i].setMap(null);
}
markers = [];

proof of concept fiddle

代码段

＆＃13;

＆＃13;

google.maps.event.addDomListener(window, "load", initMap);
//Array of all map markers
var markers = [];
var mxTracks = [
  ["Brighton, UK", 0, 50.82253000000001, -0.13716299999998682],
  ["Cambridge, UK", 1, 52.205337, 0.12181699999996454]
];
// Loading Map
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 54.188,
      lng: -2.878
    },
    zoom: 6
  });

  //Creating a Geocoder object
  var geocoder = new google.maps.Geocoder();

  //Calling a 
  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
  });

  //Geocoding function
  function geocodeAddress(geocoder, resultsMap) {
    //Removing all markers form the map each time this function is called  
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
    markers = [];
    var address = document.getElementById('address').value;
    var distance = document.getElementById('distance').value;
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status === 'OK') {
        resultsMap.setCenter(results[0].geometry.location);
        var userMarker = new google.maps.Marker({
          map: resultsMap,
          position: results[0].geometry.location,
          // icon: 'img/bluedot.png'
        });
        markers.push(userMarker);
        //Creating track markers
        for (var i = 0; i < mxTracks.length; i++) {
          var trackMarker = new google.maps.Marker({
            position: new google.maps.LatLng(mxTracks[i][2], mxTracks[i][3])
          });
          markers.push(trackMarker);
          //If markers are within a set distance add them to a map
          if (google.maps.geometry.spherical.computeDistanceBetween(userMarker.getPosition(), trackMarker.getPosition()) < parseInt(distance) * 1609.34) {
            trackMarker.setMap(resultsMap);
          }
        }
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }
}

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<input id="address" value="London, UK" />
<input id="submit" type="button" value="submit" />
<input id="distance" value="100" />
<div id="map"></div>

＆＃13;

＆＃13;

＆＃13;