web-dev-qa-db-ja.com

Google Maps API v3は、指定された半径を表示するようにズームレベルを設定しますか？

ユーザーが郵便番号と半径（マイル）を入力するマップを作成しました。郵便番号から作成されたポイントを中心にマップを配置し、その半径内にある領域のみを（大まかに）表示します。半径のある円を作成し、マップをその円に合わせるようにしています。現在は正しく中央に配置されていますが、表示されている領域は指定された半径よりもはるかに大きくなっています。

me.center_map = function(latlng, r)
{
    // latlng is the point of the zipcode
    var circ = new google.maps.Circle();
    circ.setRadius(r * 1609.0);
    circ.setCenter(latlng);
    map.setCenter(latlng);
    map.fitBounds(circ.getBounds());

    // updates markers
    google.maps.event.trigger(map,'dragend');
};

編集：私が使用している円を描きました。理想的には、地図は半径内の領域にズームインされます。

enter image description here

javascriptgoogle-maps
24
roflwaffle

FitBounds（）の呼び出しは、境界を完全に含む最小のズームレベルにズームします。さらに1つのズームレベルでズームインした場合、半径はマップ内に完全には含まれません。

22
Alex
map.setZoom(map.getZoom() + 1);

もちろん、これは特定の半径の適合度に依存します（常に同じではない場合）

円内の領域を表示するには、円の周囲に角をもつ長方形を作成し、マップのビューポートをその境界に合わせる必要があります。

例えば。同じ中心点で目に見える円と透明な長方形を描くことは、opの説明どおりに機能するはずです。

4
Martin Zeitler

2017年6月以降、メソッドfitBoundsには、パディングのサイズを表す2番目のパラメーターがあります。それを削除したい人は、0を渡すだけです。

Map.map.fitBounds(bounds, 0);

新しいメソッドシグネチャ：

fitBounds(bounds:LatLngBounds|LatLngBoundsLiteral, padding?:number)
1
Roberto Júnior