javascript - language - google maps api شرح




Google Maps API v3: كيفية إزالة جميع العلامات؟ (20)

أنا أعلم أن هذا ربما هو الحل الشبيه ، ولكن هذا ما أفعله

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

تعمل كل مرة بالنسبة لي.

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

map.clearOverlays();

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

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


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

    map.clear();

الحل سهل جدا. يمكنك استخدام الطريقة: 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>

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


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

map.clear();

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


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

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

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

function clearMarkers() {
            setAllMap(null);
        }

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

 function deleteMarkers() {
            clearMarkers();
            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;
  }
}

كان هذا أبسط الحلول التي نشرها 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.

لا أعرف السبب ، ولكن إعداد 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);
    }
});

لقد جربت جميع الحلول المقترحة ، ولكن لم يعمل شيء بالنسبة لي في حين كانت جميع علاماتي ضمن مجموعة. في نهاية المطاف أنا فقط وضعت هذا:

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

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

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

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

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

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

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

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

هذا هو!!

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



يبدو أنه لا يوجد مثل هذه الوظيفة في V3 حتى الآن.

يقترح الأشخاص الاحتفاظ بالمراجع إلى جميع العلامات التي لديك على الخريطة في مصفوفة. ثم عندما تريد حذف م ، فقط قم بتشغيل حلقة الصفيف واستدعاء .setMap (خالية) الأسلوب على كل من المراجع.

انظر هذا السؤال لمزيد من المعلومات / الكود.

نسختي:

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

تم تعديل الرمز لهذا الرمز lootogo.com/googlemapsapi3/markerPlugin.html أزلت الحاجة إلى الاتصال بشركة addMarker يدويًا.

الايجابيات

  • القيام بهذه الطريقة التي تبقي رمز مضغوط وفي مكان واحد (لا تلوث مساحة الاسم).
  • لا يتعين عليك تتبع العلامات بنفسك بعد الآن ويمكنك دائمًا العثور على جميع العلامات على الخريطة عن طريق الاتصال map.getMarkers ()

سلبيات

  • استخدام النماذج الأولية والأغلفة مثلما فعلت الآن يجعل شفرتي تعتمد على رمز Google ، إذا قاموا بتغيير رئيس البلدية في مصدرهم فسوف ينكسر هذا.
  • إذا لم تفهمها فلن تكون قادرًا على إصلاحها في حالة كسرها. الاحتمالات منخفضة أنهم سوف يغيرون أي شيء من شأنه أن يكسر هذا ، ولكن لا يزال ..
  • إذا أزلت علامة واحدة يدويًا ، فستظل الإشارة في صف العلامات. (يمكنك تعديل طريقة setMap لإصلاحها ، ولكن على حساب تكرار صفيفات علامات الحوض وإزالة المرجع)

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

overlay-overview

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

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

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

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


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

function clearMarkers(category){ 
  var i;       

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

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

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

تحديث:

يبدو أن Google غيّرت واجهة برمجة التطبيقات بحيث أن " set_map " ليس " setMap ".

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


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

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

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

تعمل على الكروم ، فايرفوكس ، أي ...







google-maps-api-3