Google Maps API v3: วิธีลบเครื่องหมายทั้งหมดได้อย่างไร


429

ใน Google Maps API v2 หากฉันต้องการลบเครื่องหมายแผนที่ทั้งหมดฉันทำได้ง่ายๆ:

map.clearOverlays();

ฉันจะทำสิ่งนี้ใน Google Maps API v3 ได้อย่างไร

ดูAPI อ้างอิงมันไม่ชัดเจนสำหรับฉัน


3
ฉันพบรหัสที่ลิงค์ด้านล่างนี้ แต่ Holy Cow - คือรหัสจำนวนมากเพื่อจำลองรหัส 1 บรรทัดก่อนหน้าใน v2 ของ API lootogo.com/googlemapsapi3/markerPlugin.html
mp_

2
จำไว้ว่าแผนที่ 3.0 หมายถึงจะเบามากในการสั่งซื้อสำหรับอุปกรณ์มือถือที่จะใช้กับเป็นความล่าช้าน้อยที่สุดเท่าที่เป็นไปได้ ...
Petrogad

1
การแก้ปัญหาที่แนะนำที่นี่ดูเหมือนจะแตกเป็น 2010/07/29 ฉันหวังว่าฉันจะมีเวอร์ชันที่ใช้งานได้เพื่อแนะนำแทน
Jonathan Hanson

9
คำตอบที่ให้คะแนนสูงสุดผิด ดูแหล่งที่มาในตัวอย่างนี้เพื่อดูวิธีการใช้งาน: google-developers.appspot.com/maps/documentation/javascript/…
Seb Ashton

คำตอบ:


487

ทำต่อไปนี้:

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();ฟังก์ชั่นทุกที่ที่จำเป็น

แค่นั้นแหละ!!


32
สำหรับ .. ในห่วงที่มีอาร์เรย์หรือไม่? สิ่งนี้ไม่ดีแน่ .. ..see: stackoverflow.com/questions/500504/…
zack

4
อีกวิธีหนึ่งคุณสามารถซ่อนเครื่องหมายโดยใช้ marker.setVisible (false)
NBK

12
เครื่องหมายยังคงอยู่ในอาร์เรย์แม้ว่ามันจะขยายใหญ่ขึ้นเรื่อย ๆ อยากจะแนะนำให้ล้างอาร์เรย์เช่นกันหลังจากวนรอบ
Ami

5
คุณสามารถตั้งค่าmarkersArrayให้เป็นอาร์เรย์ที่ว่างเปล่าแทนที่จะตั้งค่าความยาวของมันซึ่งฉันพบว่าเป็นเลขคี่:markersArray = [];
hellatan

11
ผมจะใช้วิธีการสำหรับการประมวลผลอาร์เรย์:while while(markersArray.length) { markersArray.pop().setMap(null); }ไม่ต้องล้างอาเรย์หลังจากนั้น
YingYang

84

ปัญหาเดียวกัน. รหัสนี้ใช้งานไม่ได้อีกต่อไป

ฉันได้ทำการแก้ไขเปลี่ยนวิธี 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


1
วิธีที่ฉันทำให้มันทำงานได้ในที่สุดคือการย้ำผ่านคอลเลคชั่นเครื่องหมายที่ฉันเก็บไว้และใช้ setMap (null)
เซบาสเตียน

4
แต่สิ่งนี้จะเคลียร์เครื่องหมายจากหน่วยความจำหรือไม่? ฉันรู้ว่า JavaScript มีการรวบรวมขยะอัตโนมัติ แต่เราจะรู้ได้อย่างไรว่า API ของ Google ไม่มีการอ้างอิงถึงเครื่องหมายเมื่อ setMap (null) ถูกเรียก? ในแอปพลิเคชันของฉันฉันเพิ่มและ "ลบ" เครื่องหมายมากมายและฉันจะเกลียดสำหรับเครื่องหมาย "ลบ" เหล่านั้นทั้งหมดที่จะดูดหน่วยความจำ
Nick

@Nick: เพิ่ม 'ลบ this.markers [i];' หลังจากบิต setMap (null)
DaveS

4
คำถามนี้ตอบในเอกสารตอนนี้ code.google.com/apis/maps/documentation/javascript/…
lashleigh

1
ใครแม้กระทั่งใช้new Array();?
Rihards

47

ดูเหมือนว่ายังไม่มีฟังก์ชั่นดังกล่าวใน 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 ด้วยตนเอง

ข้อดี

  • การทำเช่นนี้ช่วยให้คุณสามารถรักษาโค้ดให้กะทัดรัดและอยู่ในที่เดียว
  • คุณไม่จำเป็นต้องติดตามเครื่องหมายด้วยตนเองอีกต่อไปคุณสามารถค้นหาเครื่องหมายทั้งหมดบนแผนที่ได้โดยการเรียก map.getMarkers ()

จุดด้อย

  • การใช้ต้นแบบและเครื่องห่อหุ้มอย่างที่ฉันทำตอนนี้ทำให้รหัสของฉันขึ้นอยู่กับรหัส Google ถ้าพวกเขาทำการเปลี่ยนแปลงนายกเทศมนตรีในแหล่งที่มาของพวกเขาสิ่งนี้จะทำให้แตก
  • หากคุณไม่เข้าใจคุณจะไม่สามารถแก้ไขได้หากเกิดข้อผิดพลาด โอกาสอยู่ในระดับต่ำที่พวกเขากำลังจะเปลี่ยนแปลงอะไรก็ตามที่จะทำลายสิ่งนี้ แต่ก็ยัง ..
  • หากคุณลบเครื่องหมายเดียวด้วยตนเองการอ้างอิงจะยังคงอยู่ในอาร์เรย์เครื่องหมาย (คุณสามารถแก้ไขวิธี setMap ของฉันเพื่อแก้ไขได้ แต่ด้วยค่าใช้จ่ายในการวนลูปอาร์เรย์เครื่องหมายรางน้ำและการลบการอ้างอิง)

1
+1 จากฉัน แต่คำตอบของคุณจะดีกว่าถ้าคุณใส่กระดาษห่อเรียก call addMarker โดยอัตโนมัติ!
Andrew

ฉันคิดว่าคุณหมายถึงคำตอบของแอนดรูจริง คุณช่วยแสดงด้วยรหัสสิ่งที่คุณทำแตกต่างกันและทำไม ขอบคุณ
mp_

ฉันขอโทษด้วยความล่าช้าฉันถือกลับมาจากการโพสต์รหัสเพราะฉันไม่สามารถทดสอบได้อย่างรวดเร็ว
Maiku Mori

ขอบคุณ Maiku แม้ว่าฉันไม่เข้าใจ - ฉันจะเพิ่มเครื่องหมายใหม่ในตัวอย่างของคุณได้อย่างไร อีกครั้งขอบคุณมาก!
mp_

1
ฉันพยายามใช้ setMap (null) แต่ฉันมีสคริปต์การอัปเดตอัตโนมัติและทุกครั้งที่ฉันตั้งเครื่องหมายของฉันทั้งหมด 50 ตัวหรือมากกว่านั้นให้เป็นแผนที่ว่างเปล่า สิ่งนี้ทำให้หน้าเว็บพังเพราะทุก ๆ 30 วินาทีมันเพิ่มเครื่องหมายใหม่ 50 ตัวใน DOM และสิ่งนี้แพร่กระจายอย่างไม่สิ้นสุดเนื่องจากหน้าเว็บเปิดตลอด 24/7 บนผนังวิดีโอ ฉันต้องใช้คำตอบสูงสุดและล้างการซ้อนทับแผนที่ทั้งหมดจาก DOM ทั้งหมดก่อนที่จะสร้างใหม่ หวังว่าสิ่งนี้จะช่วยให้ใครบางคน; ใช้เวลานานกว่าจะคิดออกว่าเหตุใดหน้าของฉันจึงพัง! :(
InterfaceGuy

23

นี่เป็นวิธีที่ง่ายที่สุดของโซลูชันทั้งหมดที่โพสต์โดย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.

21
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 ของฉันดังนั้นฉันไม่ทราบว่ามันมาจากไหน


+1 จากฉัน ฉันจะเพิ่ม wrapper รอบ google.maps.Marker constructor (หรือวิธี setMap เนื่องจากฉันคิดว่านวกรรมิกเรียกมันว่าภายใน) ซึ่งเรียก addMarker โดยอัตโนมัติ แต่ก็ยังเป็นคำตอบที่ดี :)
Maiku Mori

@Maiku Mari คุณจะแสดงด้วยรหัสว่าคุณทำอะไรที่แตกต่างกันและทำไม ขอบคุณ
mp_

นี่ไม่ใช่วิธีการแก้ปัญหา? คุณลบเครื่องหมายโดยใช้ set_map (null) บนเครื่องหมายเฉพาะที่คุณต้องการล้างหากคุณต้องการล้างทั้งหมดแล้ววนซ้ำผ่านการใช้ฟังก์ชันนี้ หากคุณต้องการอะไรมากกว่านี้ขอได้ที่นี่: code.google.com/p/gmaps-api-issues/issues/…
Petrogad

ผมเชื่อว่ามันมาจากที่นี่lootogo.com/googlemapsapi3/markerPlugin.html
Maiku Mori

6
-1 สไตล์ไม่ดี มีอาร์เรย์เครื่องหมายเดียวเท่านั้นที่สร้างขึ้น แต่หนึ่งรายการต่อหนึ่งแผนที่หลังจาก clearMarkers (สาเหตุของความแตกต่างที่ได้รับ / การตั้งค่าด้วยต้นแบบ) ข้อบกพร่องที่น่ารังเกียจกับวัตถุแผนที่หลาย
โทมัส

18

ในเวอร์ชั่นใหม่ 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;
  }
}

6

แกลเลอรีสาธิตของ Google มีการสาธิตเกี่ยวกับวิธีการใช้งาน:

http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html

คุณสามารถดูซอร์สโค้ดเพื่อดูว่าจะเพิ่มเครื่องหมายได้อย่างไร

เรื่องสั้นสั้นพวกเขาเก็บเครื่องหมายในอาร์เรย์ทั่วโลก เมื่อทำการล้าง / ลบพวกมันจะวนรอบอาร์เรย์และเรียก ".setMap (null)" บนวัตถุเครื่องหมายที่กำหนด

อย่างไรก็ตามตัวอย่างนี้แสดง 'เคล็ดลับ' หนึ่งรายการ "Clear" สำหรับตัวอย่างนี้หมายถึงการลบออกจากแผนที่ แต่เก็บไว้ในอาร์เรย์ซึ่งทำให้แอปพลิเคชันสามารถเพิ่มพวกเขาอีกครั้งในแผนที่ได้อย่างรวดเร็ว เรียกได้ว่าเป็น "ซ่อน" พวกเขา

"Delete" จะล้างอาร์เรย์ด้วย



6

การแก้ปัญหาค่อนข้างง่าย 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 พัฒนาเว็บไซต์


5

แอปพลิเคชั่นคำตอบของ 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) ;
    }

4

"การset_map" ฟังก์ชั่นโพสต์ในคำตอบทั้งสองดูเหมือนจะไม่ทำงานใน Google Maps API v3

ฉันสงสัยว่าเกิดอะไรขึ้น

ปรับปรุง:

ดูเหมือนว่า Google จะเปลี่ยน API เพื่อให้ " set_map" ไม่ใช่ " setMap"

http://code.google.com/apis/maps/documentation/v3/reference.html


4

คุณสามารถดูตัวอย่างวิธีลบเครื่องหมายได้ที่นี่

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 = [];
}

3

ต่อไปนี้จากอานนท์ทำงานได้อย่างสมบูรณ์แม้ว่าจะมีการกะพริบเมื่อล้างการซ้อนทับซ้ำ ๆ

ทำต่อไปนี้:

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()ฟังก์ชันได้ทุกที่ที่ต้องการ

แค่นั้นแหละ!!

หวังว่าจะช่วยคุณ


1
for(in in markersArray){}อาจไม่ทำสิ่งที่คุณคาดหวังให้ทำ หากArrayมีการขยายที่ใดก็ได้ในรหัสมันจะวนซ้ำคุณสมบัติเหล่านั้นเช่นกันไม่ใช่เฉพาะดัชนี เวอร์ชันจาวาสคริปต์ที่markersArray.forEach()ไม่รองรับทุกที่ คุณน่าจะดีกว่าด้วยfor(var i=0; i<markersArray.length; ++i){ markersArray.setMap(null); }
Kit Sunde

3

ฉันพบว่าใช้ห้องสมุด 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)(ฉันตรวจสอบแหล่งที่มา) มันจะมีงานน้อยลงที่จะนำพวกเขาเข้าแถวและทำมันเอง
Kit Sunde

3

คุณสามารถทำได้ด้วยวิธีนี้เช่นกัน:

function clearMarkers(category){ 
  var i;       

  for (i = 0; i < markers.length; i++) {                          
    markers[i].setVisible(false);        
  }    
}

2

ฉันเพิ่งลองสิ่งนี้ด้วย kmlLayer.setMap (null) และใช้งานได้ ไม่แน่ใจว่าจะทำงานกับเครื่องหมายปกติ แต่ดูเหมือนว่าจะทำงานอย่างถูกต้อง


2

หากต้องการล้างการวางซ้อนทั้งหมดรวมถึง 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"));
}

สิ่งนี้จะไม่รีเซ็ตแผนที่หรือ สมมติว่าผู้ใช้ลากแผนที่ไปยังพื้นที่ใหม่หรือไม่?
Kichu

2

หากต้องการลบเครื่องหมายทั้งหมดออกจากแผนที่ให้สร้างฟังก์ชั่นดังนี้:

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 = [];
      }

2

วิธีที่สะอาดที่สุดในการทำเช่นนี้คือทำซ้ำคุณสมบัติทั้งหมดของแผนที่ เครื่องหมาย (พร้อมกับรูปหลายเหลี่ยมโพลีน ฯลฯ ) จะถูกเก็บไว้ในชั้นข้อมูลของแผนที่

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 อื่น ๆ ในภายหลัง


1

นี่คือวิธีที่ 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


0

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

0

เพียงเดินไปที่เครื่องหมายและลบออกจากแผนที่แถวเครื่องหมายของแผนที่ที่ว่างเปล่าหลังจากนั้น:

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


0

ฉันได้ลองวิธีแก้ปัญหาที่เสนอทั้งหมดแล้ว แต่ไม่มีอะไรทำงานให้ฉันได้ในขณะที่เครื่องหมายทั้งหมดของฉันอยู่ในกลุ่ม ในที่สุดฉันก็ใส่สิ่งนี้:

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();

-1

คุณหมายถึงลบออกเหมือนซ่อนหรือลบทิ้งใช่ไหม

ถ้าซ่อนตัวอยู่:

function clearMarkers() {
            setAllMap(null);
        }

หากคุณต้องการลบ:

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

สังเกตเห็นว่าฉันใช้เครื่องหมายอาเรย์เพื่อติดตามพวกเขาและรีเซ็ตด้วยตนเอง


-1

คุณต้องตั้งค่าแผนที่เป็นโมฆะเครื่องหมาย

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

-1

ฉันพบวิธีแก้ปัญหาง่ายๆ (ฉันคิดว่า):

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

function Clear(){
     marker.setMap(null);
}



-3

ฉันรู้ว่านี่อาจเป็นคำตอบเดียว แต่นี่คือสิ่งที่ฉันทำ

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

ทำงานทุกครั้งสำหรับฉัน


2
$ ( "# map_canvas") HTML ( ""); ในความเป็นจริงจะล้างแผนที่ทั้งหมด div สะอาดและยังขึ้นอยู่กับ jQuery ดังนั้นการตอบสนองของคุณทั้งโง่และไม่ช่วยเหลือ
Sam

ใช่ถูกต้องแล้ว เริ่มต้นแผนที่และเครื่องหมาย
kronus

แต่เขาไม่ต้องการเริ่มต้นแผนที่ใหม่อีกครั้งเขาต้องการลบเครื่องหมายที่มีอยู่ออกไป ....
Sam

ฉันแค่เสนอวิธีที่ฉันได้พบเพื่อลบเครื่องหมายที่มีอยู่ อย่างน้อยก็ให้มันยิงและบอกฉันว่ามันทำงานหรือไม่ มันใช้งานได้สำหรับฉัน
kronus

2
จุดที่ต้องการลบเครื่องหมายแผนที่คือการหลีกเลี่ยงการเริ่มต้นใหม่แผนที่สถานการณ์เช่นของฉันหมายความว่าเพราะฉันใช้ห้องสมุดวาดรูป googles สำหรับวาดภาพบนแผนที่ถ้าฉันล้างมันออกและเริ่มต้นแผนที่ใหม่ทั้งหมดในภาพซ้อนทับทั้งหมดที่ฉันวาด หายไปวิธีเดียวที่จะหยุดนั่นคือการเก็บซ้อนทับทั้งหมดและเพิ่มพวกเขาอีกครั้งซึ่งเป็นงานที่ไม่จำเป็นจำนวนมาก การกำหนดค่าเริ่มต้นใหม่ให้กับแผนที่ไม่ใช่การลบเครื่องหมายออกจากการสร้างใหม่จากการลบอีกครั้งโดยไม่ลบเครื่องหมาย
Sam
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.