1. ホーム
  2. javascript

[解決済み] Google Maps API V3 で fitBounds() を使用した後に setZoom() を使用する。

2023-07-05 13:24:09

質問

fitBounds()を使って、現在表示されているすべてのマーカーを含むように、地図のズームレベルを設定しています。しかし、マーカーが 1 つしか表示されていない場合、ズーム レベルは 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);

更新 : を使った @Nequin さんの回答を参照してください。 addListenerOnce を使った、タイムアウトを必要としないより良い解決策を参照してください。