javascript - source - mapoptions google maps api




Google Maps API v3:如何刪除所有標記? (20)

Google的Demo Gallery有一個關於他們如何做的演示:

overlay-overview

您可以查看源代碼以查看它們如何添加標記。

長話短說,它們將標記保存在全局數組中。 清除/刪除它們時,它們遍歷數組並在給定的標記對像上調用“.setMap(null)”。

但是,這個例子顯示了一個'技巧'。 這個例子中的“清除”意味著將它們從地圖中移除,但將它們保留在數組中,這允許應用程序快速將它們重新添加到地圖中。 從某種意義上說,這就像“隱藏”它們一樣。

“刪除”也會清除陣列。

在Google Maps API v2中,如果我想刪除所有地圖標記,我可以簡單地執行以下操作:

map.clearOverlays();

我如何在Google Maps API v3中執行此操作?

查看Reference API ,我不清楚。


以下來自Anon的作品完美無缺,但在重複清除疊加層時會閃爍。

只需執行以下操作:

I.聲明一個全局變量:

var markersArray = [];

II。 定義一個函數:

function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

III。 在調用以下命令之前,請在'markerArray'中按下標記:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV。 根據需要調用clearOverlays()函數。

而已!!

希望這會幫助你。


你的意思是刪除,因為它們隱藏或刪除它們?

如果隱藏:

function clearMarkers() {
            setAllMap(null);
        }

如果你想刪除它們:

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

請注意,我使用數組標記來跟踪它們並手動重置它。


使用這個你可以從地圖上刪除所有標記。

map.clear();

這會幫助你,它幫助我..


只需清除Googlemap即可

mGoogle_map.clear();

只需遍歷標記並從地圖中刪除它們,然後在空的地圖標記數組中:

var markers = map.markers;
for(var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
}
map.markers = [];

在新版本v3上,他們建議保留數組。 如下所示。

請參閱overlay-overview示例。

var map;
var markersArray = [];

function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
  var mapOptions = {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markersArray.push(marker);
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

在這裡您可以找到如何刪除標記的示例:

https://developers.google.com/maps/documentation/javascript/examples/marker-remove?hl=es

// Add 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 setAllMap(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() {
  setAllMap(null);
}

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

您需要將map null設置為該標記。

var markersList = [];    

function removeMarkers(markersList) {
   for(var i = 0; i < markersList.length; i++) {
      markersList[i].setMap(null);
   }
}

function addMarkers() {
   var marker = new google.maps.Marker({
        position : {
            lat : 12.374,
            lng : -11.55
        },
        map : map
       });
      markersList.push(marker);
   }

我不知道為什麼,但是,當我使用DirectionsRenderer時,將setMap(null)設置為我的標記對我setMap(null)

在我的情況下,我也必須調用setMap(null)給我的DirectionsRenderer

類似的東西:

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

if (map.directionsDisplay) {
    map.directionsDisplay.setMap(null);
}

map.directionsDisplay = directionsDisplay;

var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
};

directionsDisplay.setMap(map);
directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    }
});

我剛剛用kmlLayer.setMap(null)試過這個,它工作。 不知道這是否會與常規標記一起工作,但似乎能正常工作。


我嘗試了所有提出的解決方案,但沒有為我工作,而我的所有標記都在群集下。 最終我只是把這個:

var markerCluster = new MarkerClusterer(map, markers,
    { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
agentsGpsData[agentGpsData.ID].CLUSTER = markerCluster;

//this did the trick
agentsGpsData[agentId].CLUSTER.clearMarkers();

換句話說,如果您在群集中包裝標記並想要刪除所有標記,則可以調用:

clearMarkers();

我發現在google-maps-utility-library-v3項目中使用markermanager庫是最簡單的方法。

1.設置MarkerManager

mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
    loadMarkers();
});

2.將標記添加到MarkerManager

function loadMarkers() {
  var marker = new google.maps.Marker({
            title: title,
            position: latlng,
            icon: icon
   });
   mgr.addMarker(marker);
   mgr.refresh();
 }

3.要清除標記,只需調用MarkerManger的clearMarkers()函數即可

mgr.clearMarkers();

我知道這可能是一個簡單的解決方案,但這就是我所做的

$("#map_canvas").html("");
markers = [];

每次為我工作。


羅林格答案的清晰和簡單的應用。

function placeMarkerAndPanTo(latLng, map) {
      while(markersArray.length) { markersArray.pop().setMap(null); }
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
      map.panTo(latLng);

      markersArray.push(marker) ;
    }

要從地圖中刪除所有標記,請創建如下所示的函數:

1.addMarker(位置):此功能用於在地圖上添加標記

2.clearMarkers():這個函數從地圖中刪除所有標記,而不是從數組中刪除

3.setMapOnAll(map):這個函數用於在數組中添加標記信息

4.deleteMarkers():這個函數通過刪除對它們的引用來刪除數組中的所有標記。

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

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

解決方案非常簡單。 你可以使用這個方法: marker.setMap(map); 。 在這裡,您可以定義引腳將出現在哪個地圖上。

所以,如果你在這個方法中設置nullmarker.setMap(null); ),這個pin將會消失。

現在,你可以編寫一個功能女巫,同時使地圖中的所有標記消失!

您只需添加將您的引腳放入一個數組中,並用markers.push (your_new pin)或此代碼聲明它們,例如:

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

為了消除所有的標記,你應該用null調用函數:

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

而且,要移除並消失所有標記,您應該重置像這樣的標記數組:

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

這是我完整的代碼。 請注意,您可以用密鑰google API替換代碼中的YOUR_API_KEY

<!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>

您應該諮詢谷歌開發人員谷歌開發人員網站上的完整文檔。




for (i in markersArray) {
  markersArray[i].setMap(null);
}

只在IE上工作。

for (var i=0; i<markersArray.length; i++) {
  markersArray[i].setMap(null);
}

在Chrome上工作,Firefox,即...





google-maps-api-3