ใน Google Maps API v2 หากฉันต้องการลบเครื่องหมายแผนที่ทั้งหมดฉันทำได้ง่ายๆ:
map.clearOverlays();
ฉันจะทำสิ่งนี้ใน Google Maps API v3 ได้อย่างไร
ดูAPI อ้างอิงมันไม่ชัดเจนสำหรับฉัน
ใน Google Maps API v2 หากฉันต้องการลบเครื่องหมายแผนที่ทั้งหมดฉันทำได้ง่ายๆ:
map.clearOverlays();
ฉันจะทำสิ่งนี้ใน Google Maps API v3 ได้อย่างไร
ดูAPI อ้างอิงมันไม่ชัดเจนสำหรับฉัน
คำตอบ:
ทำต่อไปนี้:
I. ประกาศตัวแปรกลาง:
var markersArray = [];
ครั้งที่สอง กำหนดฟังก์ชั่น:
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
หรือ
google.maps.Map.prototype.clearOverlays = function() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
สาม. กดเครื่องหมายใน 'markerArray' ก่อนเรียกสิ่งต่อไปนี้:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV โทรclearOverlays();
หรือmap.clearOverlays();
ฟังก์ชั่นทุกที่ที่จำเป็น
แค่นั้นแหละ!!
markersArray
ให้เป็นอาร์เรย์ที่ว่างเปล่าแทนที่จะตั้งค่าความยาวของมันซึ่งฉันพบว่าเป็นเลขคี่:markersArray = [];
while
while(markersArray.length) { markersArray.pop().setMap(null); }
ไม่ต้องล้างอาเรย์หลังจากนั้น
ปัญหาเดียวกัน. รหัสนี้ใช้งานไม่ได้อีกต่อไป
ฉันได้ทำการแก้ไขเปลี่ยนวิธี clearMarkers ด้วยวิธีนี้:
set_map (null) ---> setMap (null)
google.maps.Map.prototype.clearMarkers = function() {
for(var i=0; i < this.markers.length; i++){
this.markers[i].setMap(null);
}
this.markers = new Array();
};
เอกสารได้รับการปรับปรุงให้รวมรายละเอียดในหัวข้อ: https://developers.google.com/maps/documentation/javascript/markers#remove
new Array();
?
ดูเหมือนว่ายังไม่มีฟังก์ชั่นดังกล่าวใน V3
ผู้คนแนะนำให้ใช้การอ้างอิงกับเครื่องหมายทั้งหมดที่คุณมีบนแผนที่ในอาร์เรย์ และเมื่อคุณต้องการลบพวกมันทั้งหมดเพียงแค่วนค่าอาร์เรย์และเรียกใช้เมธอด. setMap (null) ในแต่ละการอ้างอิง
ดูคำถามนี้สำหรับข้อมูลเพิ่มเติม / รหัส
รุ่นของฉัน:
google.maps.Map.prototype.markers = new Array();
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();
};
google.maps.Marker.prototype._setMap = google.maps.Marker.prototype.setMap;
google.maps.Marker.prototype.setMap = function(map) {
if (map) {
map.markers[map.markers.length] = this;
}
this._setMap(map);
}
รหัสนี้เป็นรุ่นที่แก้ไขของรหัสนี้http://www.lootogo.com/googlemapsapi3/markerPlugin.htmlฉันลบความต้องการที่จะเรียกใช้ addMarker ด้วยตนเอง
ข้อดี
จุดด้อย
นี่เป็นวิธีที่ง่ายที่สุดของโซลูชันทั้งหมดที่โพสต์โดยYingYang Mar 11 '14 เวลา 15: 049ภายใต้คำตอบดั้งเดิมของผู้ใช้คำถามเดิม
ฉันใช้โซลูชันเดียวกันนี้ 2.5 ปีต่อมากับ google maps v3.18 และใช้งานได้อย่างมีเสน่ห์
markersArray.push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }
// No need to clear the array after that.
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();
};
ฉันไม่คิดว่าจะมีหนึ่งใน V3 ดังนั้นฉันจึงใช้การปรับใช้ที่กำหนดเองด้านบน
ข้อจำกัดความรับผิดชอบ: ฉันไม่ได้เขียนรหัสนี้ แต่ฉันลืมที่จะเก็บข้อมูลอ้างอิงเมื่อฉันรวมเข้าไปใน codebase ของฉันดังนั้นฉันไม่ทราบว่ามันมาจากไหน
ในเวอร์ชั่นใหม่ v3 พวกเขาแนะนำให้เก็บไว้ในอาร์เรย์ ดังต่อไปนี้
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;
}
}
แกลเลอรีสาธิตของ Google มีการสาธิตเกี่ยวกับวิธีการใช้งาน:
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html
คุณสามารถดูซอร์สโค้ดเพื่อดูว่าจะเพิ่มเครื่องหมายได้อย่างไร
เรื่องสั้นสั้นพวกเขาเก็บเครื่องหมายในอาร์เรย์ทั่วโลก เมื่อทำการล้าง / ลบพวกมันจะวนรอบอาร์เรย์และเรียก ".setMap (null)" บนวัตถุเครื่องหมายที่กำหนด
อย่างไรก็ตามตัวอย่างนี้แสดง 'เคล็ดลับ' หนึ่งรายการ "Clear" สำหรับตัวอย่างนี้หมายถึงการลบออกจากแผนที่ แต่เก็บไว้ในอาร์เรย์ซึ่งทำให้แอปพลิเคชันสามารถเพิ่มพวกเขาอีกครั้งในแผนที่ได้อย่างรวดเร็ว เรียกได้ว่าเป็น "ซ่อน" พวกเขา
"Delete" จะล้างอาร์เรย์ด้วย
for (i in markersArray) {
markersArray[i].setMap(null);
}
ทำงานบน IE เท่านั้น
for (var i=0; i<markersArray.length; i++) {
markersArray[i].setMap(null);
}
ทำงานกับ chrome, firefox, เช่น ...
การแก้ปัญหาค่อนข้างง่าย marker.setMap(map);
คุณอาจจะใช้วิธีการ: ที่นี่คุณกำหนดตำแหน่งที่หมุดแผนที่จะปรากฏ
ดังนั้นหากคุณตั้งค่าnull
ในวิธีนี้ ( marker.setMap(null);
) หมุดจะหายไป
ตอนนี้คุณสามารถเขียนแม่มดฟังก์ชั่นในขณะที่ทำให้เครื่องหมายทั้งหมดหายไปในแผนที่ของคุณ
คุณเพียงเพิ่มใส่พินในอาร์เรย์และประกาศด้วย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 = [];
}
นี่คือรหัสที่สมบูรณ์ของฉัน มันง่ายที่สุดที่ฉันสามารถลดได้
ระวังให้ดีคุณสามารถแทนที่YOUR_API_KEY
รหัสด้วย 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>
คุณอาจจะปรึกษานักพัฒนาซอฟต์แวร์ Googleหรือเอกสารที่สมบูรณ์บนยังgoogle พัฒนาเว็บไซต์
แอปพลิเคชั่นคำตอบของ rolinger ที่สะอาดและง่าย
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) ;
}
"การset_map
" ฟังก์ชั่นโพสต์ในคำตอบทั้งสองดูเหมือนจะไม่ทำงานใน Google Maps API v3
ฉันสงสัยว่าเกิดอะไรขึ้น
ปรับปรุง:
ดูเหมือนว่า Google จะเปลี่ยน API เพื่อให้ " set_map
" ไม่ใช่ " setMap
"
http://code.google.com/apis/maps/documentation/v3/reference.html
คุณสามารถดูตัวอย่างวิธีลบเครื่องหมายได้ที่นี่
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 = [];
}
ต่อไปนี้จากอานนท์ทำงานได้อย่างสมบูรณ์แม้ว่าจะมีการกะพริบเมื่อล้างการซ้อนทับซ้ำ ๆ
ทำต่อไปนี้:
I. ประกาศตัวแปรกลาง:
var markersArray = [];
ครั้งที่สอง กำหนดฟังก์ชั่น:
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
สาม. กดเครื่องหมายใน 'markerArray' ก่อนเรียกสิ่งต่อไปนี้:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV เรียกใช้clearOverlays()
ฟังก์ชันได้ทุกที่ที่ต้องการ
แค่นั้นแหละ!!
หวังว่าจะช่วยคุณ
for(in in markersArray){}
อาจไม่ทำสิ่งที่คุณคาดหวังให้ทำ หากArray
มีการขยายที่ใดก็ได้ในรหัสมันจะวนซ้ำคุณสมบัติเหล่านั้นเช่นกันไม่ใช่เฉพาะดัชนี เวอร์ชันจาวาสคริปต์ที่markersArray.forEach()
ไม่รองรับทุกที่ คุณน่าจะดีกว่าด้วยfor(var i=0; i<markersArray.length; ++i){ markersArray.setMap(null); }
ฉันพบว่าใช้ห้องสมุด markermanager ในโครงการ google-maps-utility-library-v3 เป็นวิธีที่ง่ายที่สุด
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. ในการล้างเครื่องหมายคุณเพียงแค่เรียกใช้clearMarkers()
ฟังก์ชันของ MarkerManger
mgr.clearMarkers();
clearMarkers
ต้องทำคือทำซ้ำผ่านเครื่องหมายที่เรียกmarker.setMap(null)
(ฉันตรวจสอบแหล่งที่มา) มันจะมีงานน้อยลงที่จะนำพวกเขาเข้าแถวและทำมันเอง
คุณสามารถทำได้ด้วยวิธีนี้เช่นกัน:
function clearMarkers(category){
var i;
for (i = 0; i < markers.length; i++) {
markers[i].setVisible(false);
}
}
ฉันเพิ่งลองสิ่งนี้ด้วย kmlLayer.setMap (null) และใช้งานได้ ไม่แน่ใจว่าจะทำงานกับเครื่องหมายปกติ แต่ดูเหมือนว่าจะทำงานอย่างถูกต้อง
หากต้องการล้างการวางซ้อนทั้งหมดรวมถึง polys, markers, ฯลฯ ...
ใช้เพียง:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}
นี่คือฟังก์ชั่นที่ฉันเขียนให้ใช้ในการสร้างแผนที่ขึ้นมา:
function clear_Map() {
directionsDisplay = new google.maps.DirectionsRenderer();
//var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: HamptonRoads
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
หากต้องการลบเครื่องหมายทั้งหมดออกจากแผนที่ให้สร้างฟังก์ชั่นดังนี้:
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 = [];
}
วิธีที่สะอาดที่สุดในการทำเช่นนี้คือทำซ้ำคุณสมบัติทั้งหมดของแผนที่ เครื่องหมาย (พร้อมกับรูปหลายเหลี่ยมโพลีน ฯลฯ ) จะถูกเก็บไว้ในชั้นข้อมูลของแผนที่
function removeAllMarkers() {
map.data.forEach((feature) => {
feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
});
}
ในกรณีที่มีการเพิ่มเครื่องหมายผ่านตัวจัดการการวาดคุณควรสร้างตัวทำเครื่องหมายระดับโลกหรือผลักเครื่องหมายลงในชั้นข้อมูลที่สร้างเช่น:
google.maps.event.addListener(drawingManager, 'overlaycomplete', (e) => {
var newShape = e.overlay;
newShape.type = e.type;
if (newShape.type === 'marker') {
var pos = newShape.getPosition()
map.data.add({ geometry: new google.maps.Data.Point(pos) });
// remove from drawing layer
newShape.setMap(null);
}
});
ฉันขอแนะนำวิธีที่สองเพราะจะช่วยให้คุณใช้วิธีการเรียน google.maps.data อื่น ๆ ในภายหลัง
นี่คือวิธีที่ Google ใช้ในตัวอย่างอย่างน้อยหนึ่งตัวอย่าง:
var markers = [];
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
ตรวจสอบตัวอย่าง Google เพื่อดูตัวอย่างโค้ดแบบสมบูรณ์:
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
I dont' ว่าทำไม แต่การตั้งค่าเพื่อเครื่องหมายของฉันไม่ได้ทำงานสำหรับฉันเมื่อฉันใช้setMap(null)
DirectionsRenderer
ในกรณีของฉันฉันต้องโทรหา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);
}
});
เพียงเดินไปที่เครื่องหมายและลบออกจากแผนที่แถวเครื่องหมายของแผนที่ที่ว่างเปล่าหลังจากนั้น:
var markers = map.markers;
for(var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
map.markers = [];
เพียงล้าง Googlemap
mGoogle_map.clear();
ฉันได้ลองวิธีแก้ปัญหาที่เสนอทั้งหมดแล้ว แต่ไม่มีอะไรทำงานให้ฉันได้ในขณะที่เครื่องหมายทั้งหมดของฉันอยู่ในกลุ่ม ในที่สุดฉันก็ใส่สิ่งนี้:
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();
คุณหมายถึงลบออกเหมือนซ่อนหรือลบทิ้งใช่ไหม
ถ้าซ่อนตัวอยู่:
function clearMarkers() {
setAllMap(null);
}
หากคุณต้องการลบ:
function deleteMarkers() {
clearMarkers();
markers = [];
}
สังเกตเห็นว่าฉันใช้เครื่องหมายอาเรย์เพื่อติดตามพวกเขาและรีเซ็ตด้วยตนเอง
คุณต้องตั้งค่าแผนที่เป็นโมฆะเครื่องหมาย
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);
}
ฉันพบวิธีแก้ปัญหาง่ายๆ (ฉันคิดว่า):
var marker = new google.maps.Marker();
function Clear(){
marker.setMap(null);
}
ฉันใช้ชวเลขที่ทำได้ดี แค่ทำ
map.clear();
ถ้าคุณใช้ปลั๊กอิน gmap V3:
$("#map").gmap("removeAllMarkers");
ดู: http://www.smashinglabs.pl/gmap/documentation#after-load
ฉันรู้ว่านี่อาจเป็นคำตอบเดียว แต่นี่คือสิ่งที่ฉันทำ
$("#map_canvas").html("");
markers = [];
ทำงานทุกครั้งสำหรับฉัน