Intégration de Spiderfier JS dans markerClusterer V3 pour faire exploser les multi-marqueurs avec exactement la même longueur / lat
j'utilise markerCLusterer V3 sur un fichier db de Filemaker pour générer une carte (semi-live) des lieux de livraison actuels, basée hors des adresses. Saisir le lat/long de Google et peupler ceux champs est pas un problème. Générer la carte via markerClusterer ne pose aucun problème. J'héberge même le JS localement afin de pouvoir changer la variable maxZoom pour séparer les clusters au-dessus de Max zoom, de sorte que je puisse voir plusieurs marqueurs. Cependant, avec les marqueurs à exactement le même lat / longtemps, je ne vois que la dernière entrée. Je voudrais intégrer le Super-marqueur Markerspiderfier dans ce JS de sorte qu'après avoir zoomé au-delà du maxZoom, les marqueurs seraient "araignée" pour voir les marqueurs (à titre d'exemple, plusieurs pièces d'équipement étant livrés à la même adresse). Je ne peux pas trouver d'informations ici sur le web sur la façon de faire cela. C'est aussi simple que ça et je le rate ou ça n'a pas encore été fait. Merci d'avance pour toute aide!
5 réponses
je suis en utilisant: MarkerClustererPlus-2.0.14 et OverlappingMarkerSpiderfier-version -??
au début, seul le clustering fonctionne, en cliquant sur un cluster, zoome mais 2 ou plus marqueurs sur le même point restent encore un cluster même si zoomé au maximum. Malheureusement, aucun spiderfier n'est apparu: - (.
mais qu'un a remarqué la méthode setMaxZoom () sur markerClusterPlus. En réglant cela aussi votre niveau de zoom approprié (15 pour moi) spiderfier prend le dessus au-delà de la le niveau de zoom. On dirait que markerClusters dit que ce ne sont plus mes affaires à partir de maintenant c'est spiderfier :-).
paramétrer le zoom max réglera le problème:
minClusterZoom = 14;
markerCluster.setMaxZoom(minClusterZoom);
mais pour des raisons de visualisation, vous pouvez vouloir créer un écouteur clusterclick pour l'empêcher de zoomer de très près sur un faisceau de points au même endroit (cliquer sur un faisceau fixe les limites de la carte pour couvrir les points dans le faisceau; si tous les points sont au même endroit, il va zoomer dans tous les sens, qui a tendance à sembler mauvais):
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);
});
l'Intégration Spiderfier JS dans markerClusterer
pour rendre les deux travaillent ensemble, vous n'aurez qu'à ajouter un par maxzoom à la clusterMarker objet
new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});
(Zoomlevel 0 est la terre complète, et 20 est assez proche du sol). Cela signifie que si vous zoomez dans la carte plus loin que le niveau de zoom 15 (par exemple si vous cliquez sur un cluster) alors les clusters ne sont plus affichés. Si vous cliquez maintenant sur des marqueurs qui se trouvent exactement au même endroit (ou près l'un de l'autre) Spiderfier JS se déclenchera.
il suit maintenant un exemple de travail minimal. J'ai fait quelques commentaires dans le code, donc je pense que c'est auto-explicatif, mais voici quelques choses à mentionner:
- remplacez VOTRE_API_KEY par votre clé api
- marque assurez-vous de charger
oms.min.jsaprès avoir chargé l'api GoogleMaps
Exemple:
<!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>
Recommandation
Si vous partez de zéro, je vous recommande d'utiliser le JS Libary Notice. Parce que cette bibliothèque vous offre la LeafletMarkerCluster plugin qui est essentiellement markercluster avec Spiderfier intégré, et beaucoup d'autres cool truc.
Avantage:
- Cluster look vraiment sympa
- Dépliant vraiment facile à utiliser et semble assez
- vous n'avez pas besoin de personnaliser le code, car Spiderfier et markerCluster sont déjà intégrés
- autre chose de fantaisiste: comme montrer la frontière en vol stationnaire d'une région où les repères sont étalés.
- Vous pouvez choisir librement votre carte-carreaux-fournisseur et ne sont plus limités à google maps (fournisseurs possibles ici)
Downsites:
- vous devrez peut-être investir 30min pour apprendre et utiliser L'API tract au lieu de L'API Google
- si vous voulez utiliser Google map Tiles, alors vous devez utiliser ce plugin, parce que vous n'êtes autorisé à utiliser les tuiles Google qu'en utilisant L'API Google. Ce plugin est un wrapper pour L'API Google.
Voici un exemple de code:
<!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>
je suis tombé sur ce post car je cherchais exactement la même chose, mais heureusement pour moi, j'ai fait travailler!
honnêtement, je n'ai rien fait de spécial, j'ai suivi le guide d'intégration pour MarkerClusterer, puis j'ai suivi le guide d'intégration pour OverlappingMarkerSpiderfier et ils fonctionnent parfaitement ensemble.
quand je clique / zoome sur un faisceau de propriétés qui sont toutes à la même adresse, initialement il montre juste le marqueur "top", mais quand je clique il, ils Spiderfy tout comme vous le voudriez!
Quel résultat obtenez-vous lorsque vous essayez d'utiliser les deux scripts?
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