Google지도 v3 : 최소 적용

Google지도 v3 : 최소 적용 fitBounds 사용시 확대 / 축소 수준

---

지도에 일련의 마커를 그리고 있습니다 (지도 API v3 사용).

v2에서는 다음 코드가 있습니다.

  bounds = new GLatLngBounds();

  ... loop thru and put markers on map ...
  bounds.extend(point);
  ... end looping

  map.setCenter(bounds.getCenter());
  var level = map.getBoundsZoomLevel(bounds);
  if ( level == 1 ) 
    level = 5;
  map.setZoom(level > 6 ? 6 : level);

그리고지도에 항상 적절한 수준의 세부 정보가 표시되도록하는 데 문제가 없습니다.

이 기능을 v3에서 복제하려고하는데 setZoom과 fitBounds가 협력하지 않는 것 같습니다.

... loop thru and put markers on the map
  var ll = new google.maps.LatLng(p.lat,p.lng);
  bounds.extend(ll);
... end loop

var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);
map.fitBounds(bounds);

다른 순열 (예 : setZoom 이전에 fitBounds 이동)을 시도했지만 setZoom으로 수행하는 작업이지도에 영향을주지 않는 것 같습니다. 내가 뭔가를 놓치고 있습니까? 이를 수행하는 방법이 있습니까?

---

에서 Google 그룹에서이 토론 나는 당신이 fitBounds을 수행 할 때 줌과 범위 변경 이벤트를 캡처 할 수 있도록 기본적으로 줌은 비동기 적으로 발생을 발견했다. 최종 게시물의 코드는 약간의 수정으로 저에게 효과적이었습니다. 15보다 더 크게 확대 / 축소하는 것을 완전히 중지하므로 네 번째 게시물의 아이디어를 사용하여 처음에만 플래그를 설정했습니다.

// Do other stuff to set up map
var map = new google.maps.Map(mapElement, myOptions);
// This is needed to set the zoom after fitbounds, 
google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomChangeBoundsListener = 
        google.maps.event.addListener(map, 'bounds_changed', function(event) {
            if (this.getZoom() > 15 && this.initialZoom == true) {
                // Change max/min zoom here
                this.setZoom(15);
                this.initialZoom = false;
            }
        google.maps.event.removeListener(zoomChangeBoundsListener);
    });
});
map.initialZoom = true;
map.fitBounds(bounds);

도움이 되길 바랍니다.

안토니.

---

시도하지 않고 fitBounds()확대 / 축소 수준을 얻기 전에 수행 할 수 있어야합니다.

map.fitBounds(bounds);
var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);

시도했지만 작동하지 않으면 다음과 minZoom같이 MapOptions ^{(api-reference)} 에서 지도를 설정할 수 있습니다 .

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

이렇게하면을 사용할 때지도가 더 이상 축소되지 않습니다 fitBounds().

---

Anthony의 솔루션은 매우 좋습니다. 나는 초기 페이지로드에 대한 확대 / 축소 만 수정하면되었고 (시작하기에 너무 멀리 확대되지 않았는지 확인) 이것은 나를 위해 트릭을 수행했습니다.

var zoomChangeBoundsListener =
    google.maps.event.addListener(map, 'bounds_changed', function(event) {
        google.maps.event.removeListener(zoomChangeBoundsListener);
        map.setZoom( Math.min( 15, map.getZoom() ) );
    });


map.fitBounds( zoomBounds );

---

fitBounds ()를 호출하기 직전에 maxZoom 옵션을 설정하고 나중에 값을 재설정 할 수도 있습니다.

if(!bounds.isEmpty()) {
    var originalMaxZoom = map.maxZoom;
    map.setOptions({maxZoom: 18});
    map.fitBounds(bounds);
    map.setOptions({maxZoom: originalMaxZoom});
}

---

한 항목에서 map.fitBounds ()를 호출하면지도가 너무 가깝게 확대 될 수 있습니다. 이 문제를 해결하려면 mapOptions에 'maxZoom'을 추가하기 만하면됩니다.

var mapOptions = {
  maxZoom: 15
};

---

제 경우에는 단순히 확대 / 축소 수준을 fitBounds 중에 Google지도에서 선택한 것보다 하나 더 작게 설정하고 싶었습니다. 목적은 fitBounds를 사용하는 것이었지만지도 도구 등에 마커가 없는지 확인하는 것입니다.

내지도가 초기에 생성 된 후 페이지의 다른 여러 동적 구성 요소가 마커를 추가 할 기회를 갖게되며 각 추가 후에 fitBounds를 호출합니다.

이것은지도 객체가 원래 생성 된 초기 블록에 있습니다.

var mapZoom = null;

Then this is added to each block where a marker is added, right before the map.fitBounds is called...

google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
    if (mapZoom != map.getZoom()) { 
        mapZoom = (map.getZoom() - 1); 
        map.setZoom(mapZoom); 
    } 
});

When using 'bounds_changed' without the check in place, the map zoomed out once for every marker regardless of whether it needed it or not. Conversely, when I used 'zoom_changed', I would sometimes have markers under map tools because the zoom didn't actually change. Now it is always triggered, but the check ensures that it only zooms out once and only when needed.

Hope this helps.

---

Since Google Maps V3 is event driven, you can tell the API to set back the zoom to a proper amount when the zoom_changed event triggers:

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

I used initial to make the map not zooming too much when the eventual fitBounds is permorfed, but to let the user zoom as much as he/she wants. Without the condition any zoom event over 11 would be possible for the user.

---

I found the following to work quite nicely. It is a variant on Ryan's answer to https://stackoverflow.com/questions/3334729/.... It guarantees to show an area of at least two times the value of offset in degrees.

const center = bounds.getCenter()
const offset = 0.01
const northEast = new google.maps.LatLng(
    center.lat() + offset,
    center.lng() + offset
)
const southWest = new google.maps.LatLng(
    center.lat() - offset,
    center.lng() - offset
)
const minBounds = new google.maps.LatLngBounds(southWest, northEast)
map.fitBounds(bounds.union(minBounds))

참고URL : https://stackoverflow.com/questions/2989858/google-maps-v3-enforcing-min-zoom-level-when-using-fitbounds