javascript شرح - Google Maps API v3:كيفية إزالة جميع العلامات؟




marker icons (25)

في واجهة برمجة تطبيقات خرائط Google الإصدار 2 ، إذا أردت إزالة جميع علامات الخريطة ، يمكنني ببساطة القيام بما يلي:

map.clearOverlays();

كيف أفعل ذلك في الإصدار 3 من Google Maps API؟

بالنظر إلى واجهة برمجة التطبيقات المرجعية ، ليس واضحا بالنسبة لي.


Answers

تطبيق نظيف وسهل لإجابة 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) ;
    }

للتخلص من جميع التراكبات بما في ذلك البكرات والعلامات وغير ذلك ...

ببساطة استخدام:

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

الحل سهل جدا. يمكنك استخدام الطريقة: marker.setMap(map); . هنا ، يمكنك تحديد الخريطة التي ستظهر الدبوس.

لذا ، إذا قمت بتعيين قيمة null في هذه الطريقة ( marker.setMap(null); ) ، سيختفي الدبوس.

الآن ، يمكنك كتابة وظيفة ساحرة مع اختفاء جميع العلامات في الخريطة!

كل ما عليك markers.push (your_new 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);
    }
  }

لإخفاء جميع علاماتك ، يجب عليك الاتصال بالوظيفة بدون قيمة:

// 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 في الشفرة من خلال واجهة برمجة تطبيقات google الرئيسية:

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

يجب عليك الرجوع إلى مطور جوجل أو الوثائق الكاملة على ، أيضا ، جوجل موقع المطور على شبكة الإنترنت .


كان هذا أبسط الحلول التي نشرها YingYang Mar 11 '14 في 15: 049 تحت الإجابة الأصلية على السؤال الأصلي للمستخدمين

أنا أستخدم حل نفسه بعد 2.5 سنة مع خرائط جوجل v3.18 ويعمل مثل السحر

markersArray.push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }

// No need to clear the array after that.

باستخدام هذا يمكنك إزالة كل علامة من الخريطة.

map.clear();

هذا سيساعدك ، يساعدني ..


يحتوي معرض Google التجريبي على عرض توضيحي حول كيفية إجراء ذلك:

overlay-overview

يمكنك عرض شفرة المصدر لمعرفة كيفية إضافة علامات.

قصة قصيرة طويلة ، فإنها تحافظ على علامات في مجموعة عالمية. عند مسح / حذفها ، فإنها تتجول عبر الصفيف وتطلق على ".setMap (فارغة)" على كائن العلامة المحدد.

ومع ذلك ، يوضح هذا المثال "خدعة" واحدة. وتعني عبارة "مسح" لهذا المثال إزالتها من الخريطة مع الاحتفاظ بها في الصفيف ، مما يسمح للتطبيق بإعادة إضافتها بسرعة إلى الخريطة. بمعنى من المعاني ، فإن هذه الأفعال مثل "إخفاء" لهم.

"حذف" مسح المصفوفة كذلك.


لقد وجدت استخدام مكتبة 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()

mgr.clearMarkers();

تقصد إزالة كما في إخفاء أو حذفها؟

في حالة الاختباء:

function clearMarkers() {
            setAllMap(null);
        }

إذا كنت ترغب في حذفها:

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

لاحظ أنني أستخدم علامات مصفوفة لتتبعها وإعادة ضبطها يدويًا.


ما عليك سوى السير على العلامات وإزالتها من الخريطة ، مع تحديد علامات خانات الخرائط بعد ذلك:

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

ببساطة قم بما يلي:

I. تعلن عن متغير عالمي:

var markersArray = [];

II. تحديد وظيفة:

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

III. ضغط العلامات في "markerArray" قبل الاتصال التالي:

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

IV. استدعاء clearOverlays(); أو map.clearOverlays(); تعمل عند الحاجة.

هذا هو!!


أنا استخدم الاختزال الذي يقوم بهذه المهمة بشكل جيد. فقط افعل

    map.clear();

لا أعرف السبب ، ولكن إعداد setMap(null) على setMap(null) لم يعمل لي عندما أستخدم 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);
    }
});


يمكنك فعلها بهذه الطريقة أيضًا:

function clearMarkers(category){ 
  var i;       

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

نفس المشكلة. هذا الرمز لا يعمل بعد الآن.

لقد قمت بتصحيحه ، وقم بتغيير طريقة clearMarkers بهذه الطريقة:

set_map (خالية) ---> setMap (فارغة)

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


set_map وظيفة " set_map " المنشورة في كلا set_map لم تعد تعمل في واجهة برمجة تطبيقات Google Maps v3.

أتساءل ما الذي حدث

تحديث:

يبدو أن Google غيّرت واجهة برمجة التطبيقات بحيث أن " 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 = [];
}

يجب تعيين الخريطة خالية إلى ذلك العلامة.

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

ما يلي من 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() حيثما كان ذلك مطلوبًا.

هذا هو!!

آمل أن ذلك سيساعدك.


لقد وجدت حلًا بسيطًا (على ما أظن):

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

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

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

تعمل فقط على IE.

for (var i=0; i<markersArray.length; i++) {
  markersArray[i].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();

لإزالة جميع العلامات من الخريطة ، يمكنك إنشاء وظائف شيء من هذا القبيل:

1.addMarker (الموقع): تستخدم هذه الوظيفة لإضافة علامة على الخريطة

2.clearMarkers (): تقوم هذه الوظيفة بإزالة كافة العلامات من الخريطة ، وليس من الصفيف

3.setMapOnAll (الخريطة): هذه الوظيفة تستخدم لإضافة معلومات علامات في مجموعة

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

فقط مسح جوجل

mGoogle_map.clear();

هذا هو أبسط ما يمكن أن أخفضه إلى:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

لقطة شاشة:

هناك بعض إغلاق addListener يحدث عند تمرير الوسيطة رد الاتصال إلى أسلوب addListener . قد يكون هذا موضوعًا صعبًا للغاية ، إذا لم تكن على دراية بكيفية عمل الإغلاق. أقترح مراجعة مقالة Mozilla التالية للحصول على مقدمة موجزة ، إذا كان الأمر كذلك:







javascript html google-maps google-maps-api-3