Javascript Girl
  1. Javascript Girl
  3. Google Maps MarkerClusterer Pas de clustering
Intereting Posts
Fonction Javascript ne renvoie pas la valeur Obtenir des informations CPU / GPU / mémoire La modification de l'imprimante par défaut dans asp.net ou javascript, est-ce possible? Comment puis-je remplacer une fonction dans l'espace de noms global javascript? Comment envelopper une partie de tout nodo_de_domaine_domaineValue dans un élément html? Valeur de retour de transaction Web SQL SELECT Directive non appelée changement d'entrée Est-ce que HTML 5 Gaming utilise Canvas et Javascript? Comment éviter la tricherie dans ce cas? IndexedDB: Récupérer l'élément avec la valeur maximale Comment dessiner des icônes Impression de police sur un canevas html GMT est-il comparable à UTC? Comment utiliser vue-scroll Comment gérer la localisation dans les fichiers JavaScript? Comment afficher les valeurs dans table dans jsp? Les getters et les setters Javascript pour les mannequins?

Google Maps MarkerClusterer Pas de clustering

Désolé, j'ai une recherche élevée et faible et je ne peux pas sembler comprendre ça. J'ai une carte fonctionnant bien, mais j'essaie d'ajouter MarkerClusterer et les marqueurs ne sont pas regroupés. Les emplacements dans le New Jersey devraient être dans un cluster. Quelqu'un peut-il proposer des conseils?

Ceci est ma page: http://vbarbershop.com/location-finder/

Je reçois ces erreurs de javascript, qui peuvent être la cause? Je suis quelque peu inexpérimenté avec Google Maps: Uncaught TypeError: indéfini n'est pas une fonction markerclusterer.js: 660 Uncaught TypeError: undefined n'est pas une fonction markerclusterer.js: 660

C'est mon code: 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" ></script> <div id="mymap" style="width: 100%; height: 350px;"></div> <script type="text/javascript"> var infos = []; var locations = [ ['Bellingham Bakerview Square', 'http://vbarbershop.com/locations/bellingham-bakerview-square/', 48.790003, -122.494667, 4], ['River Oaks Houston', 'http://vbarbershop.com/locations/river-oaks-houston/', 29.753660, -95.410269, 4], ['Winston-Salem', 'http://vbarbershop.com/locations/winston-salem/', 36.090435, -80.286798, 4], ['Cary', 'http://vbarbershop.com/locations/cary/', 35.739575, -78.778319, 4], ['Jersey City', 'http://vbarbershop.com/locations/jersey-city/', 40.721704, -74.036919, 4], ['Hoboken', 'http://vbarbershop.com/locations/hoboken/', 40.750605, -74.027217, 4], ]; var map = new google.maps.Map(document.getElementById('mymap'), { zoom: 4, center: new google.maps.LatLng(39.183608, -96.571669), scrollwheel: false, scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }); var iconBase = 'http://vbarbershop.com/wp-content/themes/vbarbershop/library/images/'; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][2], locations[i][3]), draggable: false, icon: iconBase + 'ico-marker.png', map: map }); var content = '<a href="' + locations[i][1] + '" class="maplink">' + locations[i][0] + '</a>' var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ return function() { /* close the previous info-window */ closeInfos(); infowindow.setContent(content); infowindow.open(map,marker); /* keep the handle, in order to close it on next click event */ infos[0]=infowindow; }; })(marker,content,infowindow)); } function closeInfos(){ if(infos.length > 0){ /* detach the info-window from the marker ... undocumented in the API docs */ infos[0].set('marker', null); /* and close it */ infos[0].close(); /* blank the array */ infos.length = 0; } } var markerCluster = new MarkerClusterer(map, locations); </script>

Je vous remercie!

Le MarkerClusterer gère un ensemble d'objets google.maps.Marker. Le tableau des emplacements n'est pas le type correct.

Créez un tableau de marqueurs lorsque vous les ajoutez à la carte, utilisez ce tableau comme argument du constructeur MarkerClusterer. 

 var map = new google.maps.Map(document.getElementById('mymap'), { zoom: 4, center: new google.maps.LatLng(39.183608, -96.571669), scrollwheel: false, scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }); var iconBase = 'http://vbarbershop.com/wp-content/themes/vbarbershop/library/images/'; var gmarkers = []; for (i = 0; i < locations.length; i++) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][2], locations[i][3]), draggable: false, icon: iconBase + 'ico-marker.png', map: map }); var content = '<a href="' + locations[i][1] + '" class="maplink">' + locations[i][0] + '</a>' var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ return function() { /* close the previous info-window */ closeInfos(); infowindow.setContent(content); infowindow.open(map,marker); /* keep the handle, in order to close it on next click event */ infos[0]=infowindow; }; })(marker,content,infowindow)); gmarkers.push(marker); } function closeInfos(){ if(infos.length > 0){ /* detach the info-window from the marker ... undocumented in the API docs */ infos[0].set('marker', null); /* and close it */ infos[0].close(); /* blank the array */ infos.length = 0; } } var markerCluster = new MarkerClusterer(map, gmarkers);

Violon de travail