Google Maps API V3 : FitBounds 이후에 Setzoom을 수용 할 수 있습니까?

Question

임베디드 Google지도 (API V3)에 플롯하고 싶은 포인트 세트가 있습니다. 줌 레벨이 너무 낮지 않는 한 (예 : 너무 많이 축소). 내 접근 방식은 다음과 같습니다.

var bounds = new google.maps.LatLngBounds();

// extend bounds with each point

gmap.fitBounds(bounds); 
gmap.setZoom( Math.max(6, gmap.getZoom()) );

이것은 작동하지 않습니다. 마지막 줄 "gmap.setzoom ()"은 FitBounds 직후에 호출되면 맵의 줌 레벨을 변경하지 않습니다.

맵에 적용하지 않고 줌의 줌 레벨을 얻는 방법이 있습니까? 이것을 해결하기위한 다른 아이디어?

Answer 1

편집하다: 아래의 Matt Diamond의 의견을 참조하십시오.

알았어요! 이 시도:

map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() { 
  if (map.getZoom() > 16) map.setZoom(16); 
  google.maps.event.removeListener(listener); 
});

귀하의 요구에 맞게 수정하십시오.

Answer 2

내 앱 중 하나에서 비슷한 문제를 해결했습니다. 나는 당신의 문제에 대한 당신의 설명에 약간 혼란 스러웠지만, 당신은 내가 가진 것과 같은 목표를 가지고 있다고 생각합니다 ...

내 앱에서 나는 하나 이상의 마커를 플로팅하고지도가 그들 모두를 보여주고 있는지 확인하고 싶었습니다. 문제는 내가 FitBounds 방법에만 의존한다면 단일 포인트가 있었을 때 줌 레벨이 최대화 될 것입니다.

해결책은 포인트가 많았을 때 FitBounds를 사용하는 것이었고 한 지점 만 있었을 때 SetCenter+Setzoom을 사용하는 것이 었습니다.

if (pointCount > 1) {
  map.fitBounds(mapBounds);
}
else if (pointCount == 1) {
  map.setCenter(mapBounds.getCenter());
  map.setZoom(14);
}

Answer 3

나는 답을 얻기 위해이 페이지에 여러 번 왔으며, 모든 기존 답변이 매우 도움이되었지만 내 문제를 정확하게 해결하지 못했습니다.

google.maps.event.addListenerOnce(googleMap, 'zoom_changed', function() {
    var oldZoom = googleMap.getZoom();
    googleMap.setZoom(oldZoom - 1); //Or whatever
});

기본적으로 나는 'Zoom_Changed'이벤트가 '유휴'이벤트를 기다렸을 때 일어난 '건너 뛰기'를 막는 것을 막았다는 것을 알았습니다.

이것이 누군가를 도울 수 있기를 바랍니다!

Answer 4

Maxzoom을 미리 설정하여 나중에 제거 하여이 문제를 해결했습니다. 예를 들어:

map.setOptions({ maxZoom: 15 });
map.fitBounds(bounds);
map.setOptions({ maxZoom: null });

Answer 5

내가 착각하지 않으면 가능한 줌 레벨이 가장 높은지도에서 모든 포인트가 보이기를 원한다고 가정합니다. 지도의 줌 레벨을 초기화하여 이것을 달성했습니다. 16(V3에서 가능한 줌 레벨이 가장 높은지 확실하지 않음).

var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 16,
  center: marker_point,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

그 후 나는 바운드를했다.

var bounds = new google.maps.LatLngBounds();

// You can have a loop here of all you marker points
// Begin loop
bounds.extend(marker_point);
// End loop

map.fitBounds(bounds);

결과 : 성공!

Answer 6

나는 사용한다:

gmap.setZoom(24); //this looks a high enough zoom value
gmap.fitBounds(bounds); //now the fitBounds should make the zoom value only less

이것은 코드에 따라 24의 작은 것과 필요한 줌 레벨을 사용하지만 어쨌든 줌을 변경하고 확대 한 금액에 신경 쓰지 않을 것입니다.

Answer 7

같은 문제가 있었고 다음 코드를 사용하여 해결할 수있었습니다. 이 리스너 (google.maps.addListenerOnce()) 이벤트는 한 번만 해고됩니다. map.fitBounds() 실행됩니다. 따라서 할 필요가 없습니다

1. 청취자를 추적하고 수동으로 제거하거나
2. 지도가있을 때까지 기다리십시오 idle.

처음에는 적절한 줌 레벨을 설정하고 이벤트 리스너가 만료되었으므로 사용자가 초기 줌 레벨을 확대하거나 확대 할 수 있습니다. 예를 들어, 경우에만 google.maps.addListener() 그런 다음 사용자가 그랬습니다 절대 명시된 줌 레벨을 지나서 확대 할 수 있습니다 (경우 4). 우리가 구현 한 이후 google.maps.addListenerOnce(), 사용자는 자신이 선택한 모든 수준으로 확대 할 수 있습니다.

map.fitBounds(bounds);

var zoom_level_for_one_marker = 4;

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event){
   if (this.getZoom() >= zoom_level_for_one_marker){  
       this.setZoom(zoom_level_for_one_marker) 
   }
});

Answer 8

맵에 많은 마커를 맞추기 위해 같은 문제가있었습니다. 이것은 내 사례를 해결했습니다.

1. 경계를 선언하십시오
2. Koderoid가 제공하는 체계 (각 마커 세트마다 bounds.extend(objLatLng))

3. 맵이 완료된 후 FitBounds 실행 :

   google.maps.event.addListenerOnce(map, 'idle', function() { 
       map.fitBounds( bounds );
   });
   

Answer 9

전화하기 전에 수표를 수행하는 솔루션을 찾았습니다. fitBounds 따라서 확대하지 않고 갑자기 확대되지 않습니다

var bounds = new google.maps.LatLngBounds();

// extend bounds with each point

var minLatSpan = 0.001;
if (bounds.toSpan().lat() > minLatSpan) {
    gmap.fitBounds(bounds); 
} else {
    gmap.setCenter(bounds.getCenter());
    gmap.setZoom(16);
}

원하는 곳에서 얻으려면 Minlatspan 변수와 약간 놀아야합니다. 줌 수준과 맵 캔버스의 크기에 따라 다릅니다.

위도 대신 경도를 사용할 수도 있습니다

Answer 10

이것을 시도하십시오 :

map.fitBounds(bounds);

// CHANGE ZOOM LEVEL AFTER FITBOUNDS
zoomChangeBoundsListener = google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
  if (this.getZoom()){
    this.setZoom(15);
  }
});
setTimeout(function(){
  google.maps.event.removeListener(zoomChangeBoundsListener)
}, 2000);

Answer 11

나는 많은 부정확하거나 너무 복잡한 솔루션을 보았으므로 게시하기로 결정했습니다. 작동하고 우아한 솔루션.

이유 setZoom() 당신이 예상대로 작동하지 않습니다 fitBounds() 비동기식이므로 즉시 줌을 업데이트 할 것이라는 보장은 없지만 setZoom() 그것에 의존합니다.

당신이 고려할 수있는 것은 minZoom 호출하기 전에지도 옵션 fitBounds() 그런 다음 완료된 후 지우기 (사용자가 원하는 경우 수동으로 확대 할 수 있도록) : :

var bounds = new google.maps.LatLngBounds();
// ... (extend bounds with all points you want to fit)

// Ensure the map does not get too zoomed out when fitting the bounds.
gmap.setOptions({minZoom: 6});
// Clear the minZoom only after the map fits the bounds (note that
// fitBounds() is asynchronous). The 'idle' event fires when the map
// becomes idle after panning or zooming.
google.maps.event.addListenerOnce(gmap, 'idle', function() {
  gmap.setOptions({minZoom: null});
});

gmap.fitBounds(bounds);

또한 최대 줌을 제한하려면 동일한 트릭을 maxZoom 재산.

참조 지도 문서.

Answer 12

줌 레벨이 세트 레벨을 초과하지 않도록하기 위해 이것을 사용하여 위성 이미지를 사용할 수 있음을 알 수 있습니다.

리스너를 추가하십시오 zoom_changed 이벤트. 이는 UI에서 줌 제어를 제어 할 수있는 추가 이점이 있습니다.

만 실행 setZoom 필요한 경우 if 진술이 바람직합니다 Math.max 또는 Math.min

   google.maps.event.addListener(map, 'zoom_changed', function() { 
      if ( map.getZoom() > 19 ) { 
        map.setZoom(19); 
      } 
    });
    bounds = new google.maps.LatLngBounds( ... your bounds ... )
    map.fitBounds(bounds);

너무 멀리 축소를 방지하기 위해 :

   google.maps.event.addListener(map, 'zoom_changed', function() { 
      if ( map.getZoom() < 6 ) { 
        map.setZoom(6); 
      } 
    });
    bounds = new google.maps.LatLngBounds( ... your bounds ... )
    map.fitBounds(bounds);

Answer 13

이 기능에서는 함수가 지오메트리를 허용하기 때문에 지오메트리 유형을 저장하기 위해 메타 데이터를 동적으로 추가해야합니다.

"FitGeometries"는 맵 객체를 확장하는 JSON 함수입니다.

"Geometries"는 mvcarray ()가 아닌 일반적인 JavaScript 배열입니다.

geometry.metadata = { type: "point" };
var geometries = [geometry];

fitGeometries: function (geometries) {
    // go and determine the latLngBounds...
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < geometries.length; i++) {
        var geometry = geometries[i];
        switch (geometry.metadata.type)
        {
            case "point":
                var point = geometry.getPosition();
                bounds.extend(point);
                break;
            case "polyline":
            case "polygon": // Will only get first path
                var path = geometry.getPath();
                for (var j = 0; j < path.getLength(); j++) {
                    var point = path.getAt(j);
                    bounds.extend(point);
                }
                break;
        }
    }
    this.getMap().fitBounds(bounds);
},

Answer 14

이 작업은 API v3을 사용하지만 고정 줌을 설정하는 작업입니다.

var bounds = new google.maps.LatLngBounds();
// extend bounds with each point

gmap.setCenter(bounds.getCenter()); 
gmap.setZoom( 6 );

Answer 15

나와 마찬가지로, 당신이 청취자들과 기꺼이 놀지 않으면, 이것은 내가 생각해 낸 간단한 해결책입니다 : 이와 같이 요구 사항에 따라 엄격하게 작동하는지도에 메소드를 추가하십시오.

    map.fitLmtdBounds = function(bounds, min, max){
        if(bounds.isEmpty()) return;
        if(typeof min == "undefined") min = 5;
        if(typeof max == "undefined") max = 15;

        var tMin = this.minZoom, tMax = this.maxZoom;
        this.setOptions({minZoom:min, maxZoom:max});
        this.fitBounds(bounds);
        this.setOptions({minZoom:tMin, maxZoom:tMax});
    }

그런 다음 전화 할 수 있습니다 map.fitLmtdBounds(bounds) 대신에 map.fitBounds(bounds) 정의 된 줌 범위에서 경계를 설정하려면 ... 또는 map.fitLmtdBounds(bounds,3,5) 줌 범위를 무시하려면 ..

Answer 16

이것을 시도하십시오.

// Find out what the map's zoom level is
zoom = map.getZoom();
if (zoom == 1) {
  // If the zoom level is that low, means it's looking around the
world.
  // Swap the sw and ne coords
  viewportBounds = new
google.maps.LatLngBounds(results[0].geometry.location, initialLatLng);
  map.fitBounds(viewportBounds);
}

이것이 당신에게 도움이 될 것입니다.

모두 제일 좋다

Answer 17

경계를 계산 한 후 왼쪽 상단과 오른쪽 모서리 사이의 거리를 확인할 수 있습니다. 그런 다음 거리를 테스트하여 줌 레벨을 이해할 수 있습니다 (거리가 너무 멀리 줌 레벨이 낮은 경우).

Answer 18

나는 그것을 제안하고 싶지 않지만 당신이 ~ 해야 하다 시도 - 첫 번째 전화

gmap.fitBounds(bounds);

그런 다음 새 스레드/Asynctask를 만들고 20-50ms 정도 잠을 자고 전화하십시오.

gmap.setZoom( Math.max(6, gmap.getZoom()) );

UI 스레드에서 (핸들러 또는 onPostExecute Asynctask 방법).

그것이 작동하는지 모르겠습니다. 단지 제안입니다. 그 외에 당신은 어떻게 든 자신의 포인트에서 줌 레벨을 계산하고 너무 낮은 지 확인하고 수정 한 다음 전화 만 gmap.setZoom(correctedZoom)

Answer 19

'bounds_changed'가 올바르게 발사되지 않으면 (때로는 Google이 좌표를 완벽하게 수락하지 않는 것 같습니다) 대신 'Centre_Changed'를 사용하는 것을 고려하십시오.

FitBounds ()가 호출 될 때마다 'Center_Changed'이벤트가 발사되지만 맵이 이동 한 후에는 즉시 실행되지만 반드시 작동하지는 않습니다.

정상적인 경우, '유휴'는 여전히 최고의 이벤트 청취자이지만, 이는 부부가 자신의 FitBounds () 전화로 이상한 문제를 해결하는 데 도움이 될 수 있습니다.

보다 Google은 FitBounds 콜백을 매핑합니다

Answer 20

다른 솔루션으로 차임하기 위해 - "Bounds_changed 이벤트를 듣고 새로운 줌을 설정하는"접근 방식이 나에게 안정적으로 작동하지 않는다는 것을 알았습니다. 나는 때때로 전화를했다고 생각합니다 fitBounds 지도가 완전히 초기화되기 전에 초기화로 인해 청취자를 사용하는 바운드 _changed 이벤트가 발생했습니다. fitBounds 경계와 줌 레벨을 변경했습니다. 나는이 코드로 끝났는데 지금까지 작동하는 것 같습니다.

// If there's only one marker, or if the markers are all super close together,
// `fitBounds` can zoom in too far. We want to limit the maximum zoom it can
// use.
//
// `fitBounds` is asynchronous, so we need to wait until the bounds have
// changed before we know what the new zoom is, using an event handler.
//
// Sometimes this handler gets triggered by a different event, before
// `fitBounds` takes effect; that particularly seems to happen if the map
// hasn't been fully initialized yet. So we don't immediately remove the
// listener; instead, we wait until the 'idle' event, and remove it then.
//
// But 'idle' might happen before 'bounds_changed', so we can't set up the
// removal handler immediately. Set it up in the first event handler.

var removeListener = null;
var listener = google.maps.event.addListener(map, 'bounds_changed', () => {
  console.log(map.getZoom());
  if (map.getZoom() > 15) {
    map.setZoom(15);
  }

  if (!removeListener) {
    removeListener = google.maps.event.addListenerOnce(map, 'idle', () => {
      console.log('remove');
      google.maps.event.removeListener(listener);
    });
  }
});

Answer 21

나에게 가장 쉬운 해결책은 다음과 같습니다.

map.fitBounds(bounds);

function set_zoom() {
    if(map.getZoom()) {map.setZoom(map.getZoom() - 1);}
    else {setTimeout(set_zoom, 5);}
}
setTimeout(set_zoom, 5);

Answer 22

google.maps.event.addListener(marker, 'dblclick', function () {
    var oldZoom = map.getZoom(); 
    map.setCenter(this.getPosition());
    map.setZoom(parseInt(oldZoom) + 1);
});

Answer 23

내가 한 것은 다음과 같습니다.

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

그리고 V3 API에서 작동합니다.