Integración de Spiderfier JS en markerClusterer V3 para explotar marcadores múltiples con el mismo largo/lat

Question

Estoy usando markerCLusterer V3 en un archivo db de Filemaker para generar un mapa (semi-vivo) de las ubicaciones de entrega actuales, en función de las direcciones. Tomar el lat/long de Google y llenar esos campos no es un problema. Generar el mapa a través de markerClusterer no es problema. Incluso estoy alojando el JS localmente para poder cambiar la variable maxZoom para separar los clusters por encima del zoom máximo, de modo que pueda ver múltiples marcadores. Sin embargo, con los marcadores exactamente en la misma latitud/longitud, solo puedo ver el último ingresado. Me gustaría integrar OverlappingMarkerSpiderfier en este JS para que, después de acercarme al maxZoom, los marcadores se "separen" para ver los marcadores (como un ejemplo, se envíen varios equipos a la misma dirección). No puedo encontrar ninguna información aquí en la web sobre cómo hacer esto. Es así de simple y me falta o todavía no se ha hecho. ¡Gracias de antemano por cualquier ayuda!

Answer 1

Me encontré con esta publicación porque estaba buscando exactamente lo mismo, pero afortunadamente para mí lo he hecho funcionar.

Honestamente, no hice nada especial, seguí la guía de integración para MarkerClusterer, y luego seguí la guía de integración para OverlappingMarkerSpiderfier y funcionan perfectamente juntos.

Cuando hago clic/acerca de un conjunto de propiedades que están todas en la misma dirección, inicialmente solo muestra el marcador "superior", pero cuando hago clic en él, ¡Spiderfy igual que usted también las quiere!

¿Qué resultado específico obtiene cuando intenta utilizar los dos scripts juntos?

Answer 2

Estoy usando: MarkerClustererPlus-2.0.14 y OverlappingMarkerSpiderfier-version- ??

Al principio, solo la agrupación funciona, al hacer clic en un clúster, se acerca pero 2 o más marcadores exactamente en el mismo punto se mantienen como un clúster incluso cuando se amplía al máximo. Desafortunadamente, no apareció spiderfier :-(.

Pero noté el método setMaxZoom() en markerClusterPlus. Al configurar esto también su nivel de zoom apropiado (15 para mí) spiderfier toma más allá del nivel de zoom. Parece markerClusters dice que ya no es asunto mío, de ahora en adelante depende de spiderfier :-).

Answer 3

ajustar el zoom máximo se solucionará el problema:

minClusterZoom = 14; 
markerCluster.setMaxZoom(minClusterZoom); 

pero para fines de visualización es posible que desee crear un oyente clusterclick para evitar que el zoom en muy estrecha en una nube de puntos en el mismo lugar (clic en un clúster de conjunto de los límites del mapa para cubrir los puntos en el cluster; si todos los puntos están en el mismo lugar que va a hacer un zoom hasta el final, lo que tiende a quedar mal):

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { 
    map.fitBounds(cluster.getBounds()); // Fit the bounds of the cluster clicked on 
    if(map.getZoom() > minClusterZoom+1) // If zoomed in past 15 (first level without clustering), zoom out to 15 
     map.setZoom(minClusterZoom+1); 
}); 

Answer 4

var markerClusterer = new MarkerClusterer(map, myMarkers, { 
maxZoom: 15, 
zoomOnClick: false 
    }); 
//zoom 0 corresponds to a map of the Earth fully zoomed out, 20 is closeup 
//markerCluster goes away after zoom 
//turn off zoom on click or spiderfy won't work 

Answer 5

Integración Spiderfier JS en markerClusterer

• Descargar el archivo oms.min.js de here
• Descargar el markerClusterer.js y la carpeta de imágenes de here

Con el fin de hacer que ambos trabajan juntos sólo es necesario para agregar un maxZoom al objeto clusterMarker

new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15}); 

(Zoomlevel 0 es la tierra completa, y 20 está bastante cerca del suelo). Esto significa que si profundiza en el mapa como nivel de zoom 15 (por ejemplo, si hace clic en un clúster), los clústeres ya no se muestran. Si ahora hace clic en marcadores que se encuentran exactamente en la misma ubicación (o cerca el uno del otro) se activará Spiderfier JS.

Sigue ahora un ejemplo de trabajo mínimo. Hice algunos comentarios en el código, así que creo que es auto-explicativo, pero aquí hay algunas cosas que mencionar:

• Reemplazar YOUR_API_KEY con su clave de API
• Asegúrese de cargar oms.min.js después de haber cargado el API de Google Maps

Ejemplo:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <script  src="https://maps.googleapis.com/maps/apijs?key=YOUR_API_KEY"> 
    </script> 
    <script src="oms.min.js"></script> 
    <script src="markerclusterer.js"></script> 
    <script> 
    window.onload = function() { 
     // cluster marker 
     var clusterMarker = []; 

     var map = new google.maps.Map(document.getElementById('map'), { 
     center: new google.maps.LatLng(50, 3), 
     zoom: 6, 
     mapTypeId: 'terrain' 
     }); 

     // Create infowindow 
     var infoWindow = new google.maps.InfoWindow(); 

     // Create OverlappingMarkerSpiderfier instsance 
     var oms = new OverlappingMarkerSpiderfier(map, 
     {markersWontMove: true, markersWontHide: true}); 

     // This is necessary to make the Spiderfy work 
     oms.addListener('click', function(marker) { 
     infoWindow.setContent(marker.desc); 
     infoWindow.open(map, marker); 
     }); 

     // Some sample data 
     var sampleData = [{lat:50, lng:3}, {lat:50, lng:3}, {lat:50, lng:7}]; 


     for (var i = 0; i < sampleData.length; i ++) { 

     var point = sampleData[i]; 
     var location = new google.maps.LatLng(point.lat, point.lng); 

     // create marker at location 
     var marker = new google.maps.Marker({ 
      position: location, 
      map: map 
     }); 

     // text to appear in window 
     marker.desc = "Number "+i; 

     // needed to make Spiderfy work 
     oms.addMarker(marker); 

     // needed to cluster marker 
     clusterMarker.push(marker); 
     } 

     new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15}); 
    } 
    </script> 
</head> 
<body><div id="map" style='width:400px;height:400px;'></div></body></html> 

---

Recomendación

Si está empezando desde el principio, le recomendaría usar el JS Libary Leaflet. Debido a que esta biblioteca le proporciona el LeafletMarkerCluster plugin que es básicamente markercluster con Spiderfier integrado, y muchas otras cosas interesantes.

Ventaja:

• Cluster aspecto muy agradable
• Folleto muy fácil de usar y se ve muy
• No es necesario personalizar el código, porque Spiderfier y markerCluster ya integrados
• Algunos de lujo otras cosas: como mostrar el borde en el vuelo estacionario de una región donde se extienden los marcadores.
• Se puede elegir libremente su mapa-azulejos-proveedor y ya no está restringido a los mapas de Google (possible providers here)

Downsites:

• Es posible que tenga que invertir 30 minutos para aprender y utilizar el prospecto API en lugar de la API de Google
• Si desea utilizar Google Map Tiles, debe usar este plugin, ya que solo puede usar Google Tiles cuando utiliza la API de Google. Este complemento es un contenedor para la API de Google.

Aquí es un ejemplo de código:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> 
    <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> 
    <link rel="stylesheet" href="leaflet/dist/MarkerCluster.css" /> 
    <link rel="stylesheet" href="leaflet/dist/MarkerCluster.Default.css" /> 
    <script src="leaflet/dist/leaflet.markercluster-src.js"></script> 
    <script> 
    $(document).ready(function(){ 

    var tiles = L.tileLayer(***);//Depending on your tile provider 

    var map = new L.Map('map', {center: latlng, zoom: 1, layers: [tiles]}); 

    var markers = new L.MarkerClusterGroup({ 
     removeOutsideVisibleBounds: true, 
     spiderfyDistanceMultiplier: 2, 
     maxClusterRadius: 20 
    }); 
    var markersList = []; 

    var sampleData = [{lat:50, lng:3}, {lat:50, lng:3}, {lat:50, lng:7}]; 

    for (var i = 0; i < sampleData.length; i ++) { 

     var point = sampleData[i]; 
     var location = new L.LatLng(point.lat, point.lng); 

     // create marker at location 

     var m = new L.Marker(location); 
     m.bindPopup("Number" +i); //Text to appear in window 
     markersList.push(m); 
     markers.addLayer(m); 
    } 

    var bounds = markers.getBounds(); 
    map.fitBounds(bounds) 
    map.addLayer(markers); 
}  
</head> 
<body><div id="map" style='width:400px;height:400px;'></div></body></html>