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().

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

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

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 );

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

var mapOptions = {
  maxZoom: 15
};

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

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

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

var mapZoom = null;

그런 다음 map.fitBounds가 호출되기 직전에 마커가 추가 된 각 블록에 추가됩니다.

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

체크인하지 않고 'bounds_changed'를 사용하면지도가 필요 여부에 관계없이 모든 마커에 대해 한 번씩 축소되었습니다. 반대로 'zoom_changed'를 사용할 때는 확대 / 축소가 실제로 변경되지 않았기 때문에지도 도구 아래에 마커가있는 경우가있었습니다. 이제 항상 트리거되지만 확인을 통해 필요한 경우에만 한 번만 축소됩니다.

도움이 되었기를 바랍니다.

Google Maps V3는 이벤트 기반이므로 zoom_changed 이벤트가 트리거 될 때 확대 / 축소를 적절한 크기로 다시 설정하도록 API에 지시 할 수 있습니다 .

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

이니셜 을 사용 하여 최종 fitBounds가 실행될 때지도를 너무 많이 확대하지 않고 사용자가 원하는만큼 확대 할 수 있도록했습니다. 조건이 없으면 11 이상의 줌 이벤트가 사용자에게 가능합니다.

나는 다음이 아주 잘 작동한다는 것을 알았다. 그것은 라이언의에 변종이다 대답 에 은 https : //stackoverflow.com/questions/3334729 / ... . offset각도 값의 최소 2 배의 면적을 표시합니다 .

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))

나는 단지 풀어야 할 동일한 작업이 있었고 그것을 해결하기 위해 간단한 기능을 사용했습니다.

경계 내에 마커가 몇 개 있는지는 상관하지 않습니다. 마커가 많고 확대 / 축소가 이미 멀리있는 경우 약간 축소되지만 마커가 하나만있을 때 (또는 서로 매우 가깝게) 이면 축소가 중요합니다 ( extendBy변수로 사용자 지정 가능 ).

var extendBounds = function() {
  // Extends the Bounds so that the Zoom Level on fitBounds() is a bit farer away
  var extendBy = 0.005;
  var point1 = new google.maps.LatLng(
    bounds.getNorthEast().lat() + extendBy,
    bounds.getNorthEast().lng() + extendBy
  )
  var point2 = new google.maps.LatLng(
    bounds.getSouthWest().lat() - extendBy,
    bounds.getSouthWest().lng() - extendBy
  )
  bounds.extend(point1);
  bounds.extend(point2);
}

그것을 사용하기 위해 자체 함수를 사용하여 fitBounds():
map is my GoogleMap Object

var refreshBounds = function() {
  extendBounds();
  map.fitBounds(bounds);
}