Google Maps v3 fitBounds () Zoom trop proche pour un marqueur unique

Est-il possible de définir un niveau de zoom maximal pour fitBounds() ? Mon problème est que lorsque la carte alimente un seul emplacement, elle effectue un zoom aussi loin que possible, ce qui rend la carte hors contexte et la rend inutile. Peut-être que je prends la mauvaise approche?

Merci d’avance!

J’aime la solution de mrt (surtout quand vous ne savez pas combien de points vous allez mapper ou ajuster), sauf que cela jette le marqueur de sorte qu’il ne soit plus au centre de la carte. Je l’ai simplement allongé d’un point supplémentaire en soustrayant .01 du lat et de lng également, ainsi il garde le marqueur au centre. Fonctionne très bien, merci mrt!

 // Pan & Zoom map to show all markers function fitToMarkers(markers) { var bounds = new google.maps.LatLngBounds(); // Create bounds from markers for( var index in markers ) { var latlng = markers[index].getPosition(); bounds.extend(latlng); } // Don't zoom in too far on only one marker if (bounds.getNorthEast().equals(bounds.getSouthWest())) { var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01); var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - 0.01, bounds.getNorthEast().lng() - 0.01); bounds.extend(extendPoint1); bounds.extend(extendPoint2); } map.fitBounds(bounds); // Adjusting zoom here doesn't work :/ } 

Vous pouvez configurer votre carte avec maxZoom dans MapOptions (référence API) comme ceci:

 var map = new google.maps.Map(document.getElementById("map"), { maxZoom: 10 }); 

Cela empêcherait la carte de zoomer davantage lors de l’utilisation de fitBounds() et supprime même les niveaux de zoom de la commande de zoom.

Une autre solution consiste à développer les limites si vous détectez qu’elles sont trop petites avant d’exécuter fitBounds ():

 var bounds = new google.maps.LatLngBounds(); // here you extend your bound as you like // ... if (bounds.getNorthEast().equals(bounds.getSouthWest())) { var extendPoint = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01); bounds.extend(extendPoint); } map.fitBounds(bounds); 
 var map = new google.maps.Map(document.getElementById("map"), { maxZoom: 10 }); 

L’utilisation de l’option MaxZoom est préférable pour ne pas zoomer sur les marques que vous avez.

Si c’est pour un seul emplacement, vous pouvez utiliser setCenter () et setZoom () à la place.

Une fois toutes les limites ajoutées, ajoutez ces lignes

 var offset = 0.002; var center = bounds.getCenter(); bounds.extend(new google.maps.LatLng(center.lat() + offset, center.lng() + offset)); bounds.extend(new google.maps.LatLng(center.lat() - offset, center.lng() - offset)); 

il obtient le centre des limites réelles puis ajoute deux points supplémentaires, l’un au nord-est et l’autre au sud-ouest de votre centre

Cela définit efficacement le zoom minimum, modifie la valeur du décalage pour augmenter ou diminuer le zoom

tu peux utiliser

 map.setOptions({ maxZoom: [what u want], minZoom: [what u want] }); 

De cette façon, vous définissez les propriétés de la carte après l’initialisation de la carte. Vous pouvez les définir autant de fois que vous le voulez … mais dans votre cas, vous pouvez les définir avant fitBounds ()

bonne chance, rarutu

La façon dont j’empêche la carte de zoomer est en ajoutant cette ligne de code:

 var zoomOverride = map.getZoom(); if(zoomOverride > 15) { zoomOverride = 15; } map.setZoom(zoomOverride); 

Directement après cette ligne:

 map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); 

N’hésitez pas à changer le niveau de zoom à n’importe quel niveau que vous ne souhaitez pas que la carte zoome.

Si vous avez des problèmes ou des questions, laissez-moi un commentaire sur l’article que j’ai écrit à ce sujet sur http://icode4you.net/creating-your-own-store-locator-map-how-to-prevent-the- carte-de-zoom-en-trop-proche-sur-un-marqueur

J’aime vraiment la solution de mrt et cela fonctionne parfaitement si vous avez toujours un seul point avec lequel travailler. J’ai toutefois trouvé que si la boîte englobante n’était pas basée sur un point, mais que les points étaient très proches, cela pourrait encore entraîner un zoom trop important sur la carte.

Voici un moyen de vérifier d’abord si les points sont à une distance définie les uns des autres, puis, s’ils sont inférieurs à cette distance minimale, étendez les limites de cette distance minimale:

 var bounds = new google.maps.LatLngBounds(); // here you extend your bound as you like // ... var minDistance = 0.002; var sumA = bounds.getNorthEast().lng() - bounds.getSouthWest().lng(); var sumB = bounds.getNorthEast().lat() - bounds.getSouthWest().lat(); if((sumA < minDistance && sumA > -minDistance) && (sumB < minDistance && sumB > -minDistance)){ var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + minDistance, bounds.getNorthEast().lng() + minDistance); var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - minDistance, bounds.getNorthEast().lng() - minDistance); bounds.extend(extendPoint1); bounds.extend(extendPoint2); } 

J’espère que cela aide quelqu’un!

Cela vous donne un contrôle direct sur le zoom maximum autorisé sur l’ajustement des limites.

 var fitToMarkers = function(map, markers, maxZoom) { if (typeof maxZoom == 'undefined') maxZoom = 15; google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) { if (this.getZoom() > maxZoom) { this.setZoom(maxZoom); } }); var bounds = new google.maps.LatLngBounds(); for (var m = 0; m < markers.length; m++) { var marker = markers[m]; var latlng = marker.getPosition(); bounds.extend(latlng); } map.fitBounds(bounds); }; 

J’ai résolu ce problème avec Google Maps V3:

Vous pouvez indiquer à l’API de redéfinir le zoom sur une valeur correcte lorsque l’événement zoom_changed se déclenche:

 var initial = true google.maps.event.addListener(map, "zoom_changed", function() { if (intial == true){ if (map.getZoom() > 11) { map.setZoom(11); intial = false; } } }); 

J’ai utilisé intial pour rendre la carte ne zoomant pas trop lorsque les éventuelles limites ajustées se produisaient, sans quoi tout événement de zoom supérieur à 11 serait impossible pour l’utilisateur.

J’ai une soulution basée sur la limitation du zoom max lors de l’ajustement des limites. Fonctionne pour moi (testé sur Win 7 – IE 9, FF 13, Chrome 19):

 // When fitting bounds: var bounds = new google.maps.LatLngBounds(); // ... // extend bounds as you like // .. // now set global variable when fitting bounds window.fittingBounds = true; map.fitBounds(bounds); window.fittingBounds = false; // attach this event listener after map init google.maps.event.addListener(map, 'zoom_changed', function() { // set max zoom only when fitting bounds if (window.fittingBounds && map.getZoom() > 16) { this.setZoom(16); } }); 

Et .. en est un autre.
Même idée que mrt et Ryan, mais

  • fonctionne également si la taille des bornes n’est pas exactement égale à zéro (*)
  • empêche la distorsion près des pôles
  • utilise getCenter () au lieu de getNorthEast ()

(*) Remarque: Si la boîte est déjà assez grande, l’ajout de ces deux points supplémentaires ne devrait avoir aucun effet. Nous n’avons donc pas besoin de vérification supplémentaire.

 function calcBounds(markers) { // bounds that contain all markers var bounds = new google.maps.LatLngBounds(); // Using an underscore _.each(). Feel free to replace with standard for() _.each(markers, function(marker) { bounds.extend(marker.getPosition()); }); // prevent lat/lng distortion at the poles var lng0 = bounds.getNorthEast().lng(); var lng1 = bounds.getSouthWest().lng(); if (lng0 * lng1 < 0) { // Take the cos at the equator. var cos = 1; } else { var cos0 = Math.cos(lng0); var cos1 = Math.cos(lng1); // Prevent division by zero if the marker is exactly at the pole. var cos_safe = Math.max(cos0, cos1, 0.0001); } var cos0 = Math.cos(bounds.getNorthEast.lng() * Math.PI / 180); var cos1 = Math.cos(bounds.getSouthWest.lng() * Math.PI / 180); // "radius" in either direction. // 0.0006 seems to be an ok value for a typical city. // Feel free to make this value a function argument. var rLat = 0.0006; var rLng = rLat / cos_safe; // expand the bounds to a minimum width and height var center = bounds.getCenter(); var p0 = new google.maps.LatLng(center.lat() - rLat, center.lng() - rLng); var p1 = new google.maps.LatLng(lat.center() + rLat, center.lng() + rLng); bounds.extend(p0); bounds.extend(p1); return bounds; } 

EDIT: Je ne suis pas tout à fait sûr si mon calcul est correct, car nous avons une projection Mercator. Je pourrais ré-éditer ceci ..

Son déjà répondu ici Google Maps v3: Enforcing min. niveau de zoom lors de l’utilisation de fitBounds cela fonctionne comme prévu 🙂 alors maintenant, si après ajustement des limites, le zoom est inférieur, alors disons 13, puis vous pouvez définir un nouveau zoom que vous préeffrez

Après avoir appelé la méthode fitBounds() , essayez à nouveau de configurer le niveau de zoom. Cela forcera la carte à être à ce niveau de zoom tout en étant centrée au bon endroit.

En ce qui me concerne, je résous le problème en créant un événement inactif après les FitBounds. Travailler parfaitement Je suppose que c’est l’une des solutions les plus propres ici

 var locations = [['loc', lat, lng], ['loc', lat, lng]]; ..... for (i = 0; i < locations.length; i++) { var map = new google.maps.Map(document.getElementById('map'), { zoom: 10 }); .... create markers, etc. } .... map.fitBounds(bounds); google.maps.event.addListenerOnce(map, 'idle', function() { if (locations.length == 1) { map.setZoom(11); } }); 

Voici ma solution, qui fonctionne également lorsque deux marqueurs sont très proches. Le niveau de zoom maximum effectif est le même dans les deux situations. Donc, nous ne finissons pas par faire un zoom avant quand il y a plus d’un marqueur

L’effet, encore une fois, assure un zoom maximal, sans utiliser l’option maxZoom, ce qui a probablement pour effet indésirable d’empêcher l’utilisateur de zoomer plus loin que le niveau maxZoom avec le contrôle de zoom.

J’ai préalablement calculé maxLat, minLat, maxLng et minLng …

 var minLatSpan = 0.002; if (maxLat - minLat < minLatSpan) { // ensures that we do not zoom in too much var delta = (minLatSpan - (maxLat - minLat)) / 2; maxLat += delta; minLat -= delta; } map.fitBounds({ east: maxLng, west: minLng, north: maxLat, south: minLat, });