Google Maps API V3에서 fitBounds ()를 사용한 후 setZoom () 사용

Google Maps API V3에서 fitBounds ()를 사용한 후 setZoom () 사용

---

fitBounds ()를 사용하여 현재 표시된 모든 마커를 포함하여지도의 확대 / 축소 수준을 설정하고 있습니다. 그러나 마커가 하나만 표시되면 확대 / 축소 수준은 100 %입니다 (... 내 생각에는 확대 / 축소 수준 20 ...). 그러나 사용자가 축소하지 않고도 마커의 위치를 ​​조정할 수 있도록 그렇게 멀리 확대되는 것을 원하지 않습니다.

다음 코드가 있습니다.

var marker = this.map.createMarker(view.latlng, this.markerNumber);
this.map.bounds.extend(view.latlng);
this.map.map.setCenter(this.map.bounds.getCenter());
this.map.map.fitBounds(this.map.bounds);
if (this.markerNumber === 1) {
  this.map.map.setZoom(16);
}
this.markerNumber++;

여기서 this.map.bounds는 이전에 다음과 같이 정의되었습니다.

this.map.bounds = new google.maps.LatLngBounds();

그러나 내가 가지고있는 문제는을 사용하면 줄 this.map.map.setZoom(16);이 작동하지 않는다는 것입니다 this.map.map.fitBounds(this.map.bounds);. 그러나 fitBound () 줄을 주석 처리하면 setZoom ()이 마술처럼 작동하기 때문에 코드 줄이 정확하다는 것을 알고 있습니다.

이 문제를 해결하는 방법에 대한 아이디어가 있습니까? 이 작업을 수행 할 수없는 경우 maxZoom 수준을 대안으로 설정하려고합니다.

---

좋아, 알아 냈어. 분명히 fitbounds ()는 비동기 적으로 발생하므로 bounds_changed확대 / 축소 작동을 설정하기 전에 이벤트 를 기다려야 합니다.

map = this.map.map;

map.fitBounds(this.map.bounds);
zoomChangeBoundsListener = 
    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
        if (this.getZoom()){
            this.setZoom(16);
        }
});
setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 2000);

업데이트 : addListenerOnce시간 초과가 필요하지 않은 더 나은 솔루션은 @Nequin의 답변을 참조하십시오 .

---

google.maps.event.addListenerOnce(yourMap, 'bounds_changed', function(event) {
  if (this.getZoom() > 15) {
    this.setZoom(15);
  }
});

이 솔루션은 리스너를 제거하기 위해 시간 초과를 기다리는 대신 더 잘 작동합니다. 사용하기 전에 직접 fitBounds호출하십시오 (애프터 호출도 효과가 있다고 생각합니다).

---

추가 확대 / 축소가 약간 불편하다는 것을 알았습니다. fitBounds를 호출하기 전에 maxZoom 옵션을 설정 한 다음 콜백에서 설정 해제하면이를 피할 수 있습니다.

map.setOptions({
    maxZoom: 10
});

map.setCenter(new google.maps.LatLng(-89, -179)); // make sure it changes so the idle listener gets called back

map.fitBounds(bounds);

var listener = google.maps.event.addListenerOnce(map, "idle", function()
{
    map.setOptions({
        maxZoom: 999
    });
});

---

나는 간단하고 더러운 해결책이 있습니다.
If else 사용 ...

var marker = this.map.createMarker(view.latlng, this.markerNumber);
this.map.bounds.extend(view.latlng);
this.map.map.setCenter(this.map.bounds.getCenter()); 
if (this.markerNumber === 1) {
  this.map.map.setZoom(16);
} else {
   this.map.map.fitBounds(this.map.bounds);
}       
this.markerNumber++;

---

함수에 한 줄을 추가 addBounds(position)하고 다음과 같이 수정했습니다.

    addBounds: function(position) {
        this.get('bounds', new google.maps.LatLngBounds()).extend(this._latLng(position));
        this.get('map').fitBounds(this.get('bounds'));
        this.get('map').setZoom(16);//line added
        return this;
    },

---

I think the correct way to do is that you need to set zoom level after map.fitBounds(bounds). Just simply add map.setZoom(16) after map.fitBounds(bounds). It works fine for me.

---

All the solutions with event listeners didn't work for me (this.getZoom() always is undefined in the callback and this.setZoom() has no effect).

I came up with this solution which worked nicely:

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

참고URL : https://stackoverflow.com/questions/4523023/using-setzoom-after-using-fitbounds-with-google-maps-api-v3