web-dev-qa-db-ja.com

Leaflet.jsは、マーカーのグループにマップの中心を合わせます

私はLeaflet.jsを使用していますが、ページが起動したときにすべてがユーザーのビュー内に収まるように、マーカーを地図の中心に置く何らかの方法が必要です。すべてのマーカーが小さな領域にクラスター化されている場合、マップをすべてのマーカーが表示されるレベルまでズームダウンしたいと思います。

Googleマップには自動中心機能がありますが、Leaflet.jsでこれをどのように行うのでしょうか?

42
lorless

L.LatLngBounds を使用して、ズームする領域を作成できます。

最初に、境界を作成し、L.LatLngsの配列を渡します。

var bounds = new L.LatLngBounds(arrayOfLatLngs);

これにより、配列に含まれるすべてのポイントをカプセル化する境界が作成されます。境界を取得したら、作成した境界に一致するようにマップの境界を合わせることができます。

 map.fitBounds(bounds);

これにより、マップは可能な限り拡大されますが、配列内のすべてのポイントが含まれたままになります。

または、fitBoundsメソッドを呼び出すだけで、L.LatLngオブジェクトの配列を渡すこともできます。例えば:

map.fitBounds([[1,1],[2,2],[3,3]]);

これは、特定のL.LatLngBoundsオブジェクトを作成する必要なく、まったく同じように機能します。

95
Patrick D