كيفية عرض/إخفاء markercluster في Google Maps V3؟
-
27-09-2019 - |
سؤال
أحتاج إلى وجود علامات مختلفة للمختلف mapType
S ، وأنا أدفعهم إلى MarkerClusterer.
"أخفي" العلامات مع:
cluster.set("map", null);
cluster.resetViewport();
cluster.redraw();
و "عرض" مع:
cluster.set("map", MAP);
cluster.resetViewport();
cluster.redraw();
المشكلة هي أن MarkerClusterer لا يحب set("map", null)
; ؛ يلقي الخطأ TypeError: Object #<a MarkerClusterer> has no method 'remove'
. كيف يمكنني إظهار/إخفاءها بالطريقة الصحيحة؟
المحلول 5
قاتلت طريقي إلى حل هذا من خلال القليل من القرود والاختراق قليلا. ما زلت أنتظر إجابة نظيفة ، لكن هذا هو حل لمشكلتي ، لذلك أنا أيضًا أنشر هذا:
MarkerClusterer.prototype.remove = function () {}
[..]
cluster.set("map", HIDDEN_MAP); // remove the clusterer
cluster.resetViewport();
cluster.redraw();
نصائح أخرى
طريقة أنيقة لتطهير الكتلة
cluster.clearMarkers();
في JavaScript API V3 ، يكفي القول:
clusterer.setMap(null);
إذا قمت بتعيين خريطةك مرة أخرى على كائن الخريطة الموجود ، فستظهر المجموعات مرة أخرى.
clusterer.setMap( this.map );
أيضًا ، أود أن أقترح عدم تسمية مجموعة المجموعة الخاصة بك ، كما هو الحال في مثالك. يحتوي MarkerClusterer على كائنات عنقودية ، وهي العلامات المجمعة الفعلية وليس الكتلة نفسها.
هنا حل أكثر اكتمالا:
في .html إضافة:
<div id="map-canvas-hidden" style="display:none"></div>
<div id="map-canvas-shown" style="width:500px; height:500px"></div>
في .js إضافة:
MarkerClusterer.prototype.remove = function() { };
var HIDDEN_MAP = new google.maps.Map(document.getElementById("map-canvas-hidden"), {});
var gmap = new google.maps.Map(document.getElementById("map-canvas-shown"), {});
لإظهار المجموعات:
cluster.setMap(gmap);
cluster.resetViewport();
cluster.redraw();
لإخفاء المجموعات:
cluster.setMap(HIDDEN_MAP);
cluster.resetViewport();
cluster.redraw();
أخيرًا ، كنت بحاجة إلى بقع فنية إلى markerclusterer.js:
--- markerclusterer.js.orig 2013-12-06 18:02:32.887516000 +0100
+++ markerclusterer.js 2013-12-06 18:03:25.487516924 +0100
@@ -620,6 +620,7 @@
*/
MarkerClusterer.prototype.getExtendedBounds = function(bounds) {
var projection = this.getProjection();
+ if (!projection) return null;
// Turn the bounds into latlng.
var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),
@@ -657,7 +658,7 @@
* @private
*/
MarkerClusterer.prototype.isMarkerInBounds_ = function(marker, bounds) {
- return bounds.contains(marker.getPosition());
+ return bounds ? bounds.contains(marker.getPosition()) : false;
};
أتمنى أن يساعدك هذا
فيما يلي الكود الخاص بي لإظهار/إخفاء المجموعات بسهولة على الخريطة (تم تحديثها للإصدارات الحالية من MAPS API و JS-Cluster-Renderer). شكرا غابي.
MarkerClusterer.prototype.remove = function() {};
MarkerClusterer.prototype.hide = function() {
this.setMap(null);
this.resetViewport();
};
MarkerClusterer.prototype.show = function() {
this.setMap(map); // replace map with your reference to the map object
this.redraw();
};
// To hide the clusters:
cluster.hide();
// To show the clusters:
cluster.show();