发表新帖
发表新帖

Google Maps API v3: How to remove all markers?

后端 未结
关注
30 2792
悲哀的现实
悲哀的现实 2020-11-22 05:36

In Google Maps API v2, if I wanted to remove all the map markers, I could simply do:

map.clearOverlays();

How do I do this in Google Maps A

相关标签:
30条回答
  • 盖世英雄少女心
    2020-11-22 06:22

    The solution is quite easy. You may use the method: marker.setMap(map);. Here, you define on which map the pin will appear.

    So, if you set null in this method (marker.setMap(null);), the pin will disappear.

    Now, you can write a function witch while make disappear all markers in your map.

    You just add to put your pins in an array and declare them with markers.push (your_new pin) or this code for example:

    // Adds a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

    This is a function witch can set or disappear all the markers of your array in the map:

    // Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

    To disappear all your markers, you should call the function with null:

    // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

    And, to remove and disappear, all your markers, you should reset your array of markers like this:

    // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

    This is my complete code. It’s the simplest I could reduce to. Be care full you may replace YOUR_API_KEY in the code by your key google API:

    <!DOCTYPE html>
<html>
  <head>
  <title>Remove Markers</title>
  <style>
     /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
     #map {
       height: 100%;
       }
  </style>
</head>
<body>

<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>

  // In the following example, markers appear when the user clicks on the map.
  // The markers are stored in an array.
  // The user can then click an option to hide, show or delete the markers.
  var map;
  var markers = [];

  function initMap() {
    var haightAshbury = {lat: 37.769, lng: -122.446};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: haightAshbury,
      mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
      addMarker(event.latLng);
    });

    // Adds a marker at the center of the map.
    addMarker(haightAshbury);
  }

   // Adds a marker to the map and push to the array.
  function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.push(marker);
  }

  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

</script>
   <script async defer
    src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap">
   </script>
</body>
</html>

    You may consult google developer or the complete documentation on, also, google developer web site.

    0 讨论(0)
  • 野的像风
    2020-11-22 06:24 
    google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.addMarker = function(marker) {
    this.markers[this.markers.length] = marker;
};

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

    I don't think there is one in V3 so I used the above custom implementation.

    Disclaimer: I did not write this code but I forgot to retain a reference when I merged it into my codebase so I don't know where it came from.

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-11-22 06:24

    You mean remove as in hiding them or deleting them?

    if hiding:

    function clearMarkers() {
            setAllMap(null);
        }

    if you wish to delete them:

     function deleteMarkers() {
            clearMarkers();
            markers = [];
        }

    notice that I use an array markers to keep track of them and reset it manually.

    0 讨论(0)
  • 春和景丽
    2020-11-22 06:26

    This is the method Google themselves use in at least one sample:

    var markers = [];

// Clear out the old markers.
markers.forEach(function(marker) {
  marker.setMap(null);
});
markers = [];

    Check Google sample for complete code example:

    https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

    0 讨论(0)
  • 死守一世寂寞
    2020-11-22 06:26

    I use a shorthand that does the job well. Just do

        map.clear();
    0 讨论(0)
  • 忘了有多久
    2020-11-22 06:29

    I found simple solution (I think) : 

    var marker = new google.maps.Marker();

function Clear(){
     marker.setMap(null);
}
    0 讨论(0)
 看不清?
提交回复
热议问题