境界ボックスに基づいてズームレベルを動的に設定する

12

ブラウザウィンドウのサイズに依存するサイズのリーフレットマップがあります。バウンディングボックス全体を表示しながら、可能な限りズームインされるように、ズームレベルを動的に選択したいと思います。

現在、ズームレベルをハードコードし、中心点をポイントの平均に基づいています。

map = new L.Map('map', {
  center: new L.LatLng(
    latitudeSum/locations.length,
    longitudeSum/locations.length
  )
  zoom: 9
})

代わりに、境界ボックス（2つの島）を指定し、ウィンドウのサイズに基づいてズームレベルを選択します。

leaflet

— マイク・マッケイ
ソース

24

あなたは単に使うことができます：

var group = new L.featureGroup([marker1, marker2, marker3]);

map.fitBounds(group.getBounds());

— ファーハット・アッバス
ソース

1

便利な答え-手動で計算するだけでセンタリングする前の、センタリングとズームのより良い方法です。FitBoundsが必要な答えでしたが、2つの座標を渡してfitBoundsを実行するだけでよいことがわかりました。

— マイクマッケイ2013年

2

マーカーを作成していない限り、次の回答を必ず使用してください。

— アンディ

11

@Farhatの回答を使用して、必要なのは配列の配列を渡すことだけであることがわかりました。

map.fitBounds([
  [-4.8587000, 39.8772333],
  [-6.4917667, 39.0945000]
])

— マイク・マッケイ
ソース

1

これは明らかに終わり近くの右角括弧が欠落しています。編集を元に戻した理由がわかりません。

— Jan Kyu Peblik

1

あなたはブラケットについて正しい-ありがとう。直します。ただし、編集には余分なコンマも含まれていました。

— マイクマッケイ

4

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…コードも、末尾のカンマで実際にテストされました。（寿命が短すぎて、形式が無意味に大きく異なる行に

— 煩わさ

0

map.fitBounds() Googleマップポリラインを使用している場合にも効果があります。

<!-- required for Leaflet Polyline support -->
<script type="text/javascript" src="https://cdn.rawgit.com/jieter/Leaflet.encoded/68e78190/Polyline.encoded.js"
crossorigin=""></script>

// polylines require backslashes to be escaped (Jinja example)
let encodedRoute = '{{ activity.strava_data['map']['polyline']|replace("\\", "\\\\")|safe }}';
let coordinates = L.Polyline.fromEncoded(encodedRoute).getLatLngs();
let map = L.map('map').fitBounds(coordinates);

— ナアマン
ソース

なぜこの回答は反対投票されたのですか？

— LeeGee

0

これは、@ Mike McKayのおかげで実現した方法です。;）

内側のパディングとして追加のコードをいくつかコーディネイトに追加したことに注意してください。これにより、マーカーがマップの右側に表示されなくなります。この方法は美しく見えます。


const [ ...coordinates ] = locations.map(marker => [ marker.coordinates.latitude + 
0.055, marker.coordinates.longitude + 0.055 ])

map.fitBounds([ ...coordinates ])

VUE.JS WAY：

mounted () {
   this.$nextTick(() => {
        this.initialZoom()
   })
}


methods: {
   initialZoom () {
       const map = this.$refs.myMap.mapObject
       const [ ...coordinates ] = this.locations.map(marker => [                                  
                                          marker.coordinates.latitude + 0.055,
                                          marker.coordinates.longitude + 0.055 
                                   ]) 

map.fitBounds([ ...coordinates ])

— Despertaweb
ソース