google-maps - example - google maps multiple markers same location
Integrando Spiderfier JS en markerClusterer V3 para explotar marcadores múltiples con el mismo largo/lat (5)
Estoy utilizando 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 poblar 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!
Configurar el zoom máximo solucionará el problema:
minClusterZoom = 14;
markerCluster.setMaxZoom(minClusterZoom);
pero para fines de visualización, es posible que desee crear un oyente de clic de clúster para evitar que se acerque demasiado a un grupo de puntos en la misma ubicación (al hacer clic en un clúster, establecer los límites del mapa para cubrir los puntos en el clúster; están en la misma ubicación en la que se acercará, lo que tiende a verse 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);
});
Estoy usando: MarkerClustererPlus-2.0.14 y OverlappingMarkerSpiderfier-version- ??
Al principio, solo el clúster funciona, al hacer clic en un clúster, se acerca pero dos o más marcadores en el mismo punto siguen siendo un clúster incluso cuando se amplía al máximo. Lamentablemente, no apareció spiderfier :-(.
Pero notó el método setMaxZoom () en markerClusterPlus. Al establecer esto también, su nivel de zoom apropiado (15 para mí) spiderfier se hace cargo más allá del nivel de zoom. Parece que markerClusters dice que ya no es asunto mío, de ahora en adelante depende de spiderfier :-).
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 / acercar 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 también lo quiere!
¿Qué resultado específico obtendrás cuando intentes usar los dos guiones juntos?
Integrando Spiderfier JS en markerClusterer
- Descargue el archivo
oms.min.jsdesde here - Descarga el
markerClusterer.jsy la carpeta de imágenes desde here
Para hacer que ambos trabajen juntos, solo necesita 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 se explica por sí mismo, pero aquí hay algunas cosas que mencionar:
- Reemplace YOUR_API_KEY con su clave de API
- Asegúrate de cargar
oms.min.jsdespués de cargar la 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 cero, le recomendaría usar el folleto JS Libary. Debido a que esta biblioteca le proporciona el plugin LeafletMarkerCluster que es básicamente markercluster con Spiderfier integrado, y muchas otras cosas interesantes.
Ventaja:
- Clúster se ve muy bien
- Folleto realmente fácil de usar y se ve bonito
- No es necesario personalizar el código, porque Spiderfier y markerCluster ya están integrados
- Algunas cosas extravagantes: como mostrar el borde en el borde de una región donde se extienden los marcadores.
- Puede elegir libremente su proveedor de fichas de mapa y ya no está restringido a los mapas de Google ( posibles proveedores aquí )
Downsites:
- Es posible que deba invertir 30 minutos para aprender y utilizar la API de Leaflet en lugar de la API de Google.
- Si desea utilizar Google Map Tiles, debe utilizar este plugin , ya que solo puede utilizar Google Tiles cuando utiliza la API de Google. Este complemento es un contenedor para la API de Google.
Aquí hay un código de ejemplo:
<!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>
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