Czy istnieje sposób na ustawienie maksymalnego poziomu powiększenia fitBounds()? Mój problem polega na tym, że kiedy mapa jest zasilana tylko jedną lokalizacją, powiększa się tak daleko, jak to możliwe, co naprawdę usuwa mapę z kontekstu i czyni ją bezużyteczną. Może mam złe podejście?
Z góry dziękuję!
Odpowiedzi:
Podoba mi się rozwiązanie mrt (szczególnie, gdy nie wiesz, do ilu punktów będziesz mapować lub dostosowywać), z wyjątkiem tego, że odrzuca znacznik, aby nie znajdował się już na środku mapy. Po prostu przedłużyłem ją o dodatkowy punkt odejmując 0,01 od szerokości i długości, tak aby znacznik był w środku. Działa świetnie, dzięki 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 :/
}
fitBounds()metody, jest to, że powiększanie odbywa się asynchronicznie: stackoverflow.com/questions/2989858/ ...
Możesz skonfigurować swoją mapę maxZoomw MapOptions (odwołanie do interfejsu API) w następujący sposób:
var map = new google.maps.Map(document.getElementById("map"), { maxZoom: 10 });
Dzięki temu mapa nie będzie powiększać się głębiej podczas używania, fitBounds()a nawet usunie poziomy powiększenia z elementu sterującego powiększeniem.
maxZoomprzed dopasowaniem granic, a następnie usunąć je ponownie, używając map.setOptions({ maxZoom: undefined })na idlezdarzeniu wywołanym, zmieniając ograniczenia. Zapobiega to powiększaniu, pomniejszaniu efektu zamiast resetowania powiększenia idlezdarzenia.
Innym rozwiązaniem jest rozszerzenie granic, jeśli wykryjesz, że są zbyt małe przed wykonaniem 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 });
Korzystanie z opcji MaxZoom działa najlepiej, gdy nie zbliżasz się do zaznaczonych znaków.
Po dodaniu wszystkich rzeczywistych granic dodaj te linie
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));
uzyskuje środek rzeczywistych granic, a następnie dodaje dwa dodatkowe punkty, jeden na północny wschód i jeden na południowy zachód od środka
To skutecznie ustawia minimalne powiększenie, zmienia wartość przesunięcia, aby zwiększyć lub zmniejszyć powiększenie
Jeśli dotyczy to jednej lokalizacji, można zamiast tego użyć setCenter () i setZoom ().
Sposobem, w jaki zapobiegam powiększaniu mapy zbyt daleko, jest dodanie tego wiersza kodu:
var zoomOverride = map.getZoom();
if(zoomOverride > 15) {
zoomOverride = 15;
}
map.setZoom(zoomOverride);
Bezpośrednio po tym wierszu:
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
Możesz dowolnie zmienić poziom powiększenia na dowolny poziom, na który mapa nie ma być powiększana.
Jeśli masz jakieś problemy lub pytania, zostaw mi komentarz do wpisu na blogu, który napisałem o tym na http://icode4you.net/creating-your-own-store-locator-map-how-to-prevent-the- map-from-zooming-in-too-close-on-a-marker
Naprawdę podoba mi się rozwiązanie mrt i działa idealnie, jeśli zawsze masz tylko jeden punkt do pracy. Zauważyłem jednak, że jeśli obwiednia nie była oparta na jednym punkcie, ale punkty były bardzo blisko siebie, nadal mogło to spowodować zbyt duże powiększenie mapy.
Oto sposób, aby najpierw sprawdzić, czy punkty znajdują się w określonej odległości od siebie, a następnie, jeśli są mniejsze niż ta minimalna odległość, wydłuż granice o tę minimalną odległość:
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);
}
Mam nadzieję, że to komuś pomoże!
Daje to bezpośrednią kontrolę nad maksymalnym dozwolonym powiększeniem przy dopasowywaniu granic.
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);
};
Jeśli chodzi o mnie, rozwiązuję to, tworząc zdarzenie bezczynności po fitBounds. Działa idealnie. To chyba jedno z najczystszych rozwiązań
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);
}
});
Rozwiązałem z tym fragmentem, ponieważ Mapy Google V3 są sterowane zdarzeniami:
możesz powiedzieć interfejsowi API, aby ustawił powiększenie na odpowiednią wartość, gdy wyzwala zdarzenie zoom_changed :
var initial = true
google.maps.event.addListener(map, "zoom_changed", function() {
if (intial == true){
if (map.getZoom() > 11) {
map.setZoom(11);
intial = false;
}
}
});
Użyłem początkowo, aby mapa nie powiększała się zbyt mocno wczytywania, gdy ewentualne dopasowanieBounds uległo zmianie, bez niego żadne zdarzenie powiększenia powyżej 11 byłoby niemożliwe dla użytkownika.
Po wywołaniu fitBounds()metody spróbuj ponownie ustawić poziom powiększenia. Zmusi to mapę do osiągnięcia tego poziomu powiększenia i wyśrodkowania we właściwym miejscu.
Mam soulution opartą na ograniczaniu maksymalnego zoomu podczas dopasowywania granic. U mnie działa (testowane na 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);
}
});
I… oto kolejny.
Taki sam pomysł jak pan i Ryan, ale
(*) Uwaga: jeśli pudełko jest już wystarczająco duże, dodanie tych dwóch dodatkowych punktów nie powinno przynieść żadnego efektu. Nie potrzebujemy więc dalszych sprawdzeń.
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;
}
EDYCJA: Nie jestem do końca pewien, czy moje obliczenia współczynnika są prawidłowe, biorąc pod uwagę, że mamy odwzorowanie Mercatora. Mogę to ponownie edytować ...
Odpowiedział już tutaj Google Maps v3: wymuszanie min. poziom powiększenia podczas używania fitBounds działa zgodnie z oczekiwaniami :) więc teraz, jeśli po dopasowaniu granic powiększenie jest mniejsze niż powiedzmy 13, możesz ustawić nowe powiększenie, które preferujesz
Oto moje rozwiązanie, które działa również, gdy dwa znaczniki są bardzo blisko. Efektywny maksymalny poziom powiększenia jest taki sam w obu sytuacjach. Więc nie kończymy niepotrzebnie powiększania, gdy jest więcej niż jeden znacznik
Efektem jest znowu zapewnienie maksymalnego zoomu bez użycia opcji maxZoom, co ma prawdopodobnie niepożądany efekt uniemożliwiający użytkownikowi powiększenie powyżej poziomu maxZoom za pomocą regulacji zoomu
Wcześniej obliczyłem maxLat, minLat, maxLng i 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,
});