根据边界框动态设置缩放级别

13

我有一个传单地图，其大小取决于浏览器窗口的大小。我希望动态选择缩放级别，以便在显示整个边界框的同时尽可能放大。

现在，我只是对缩放级别进行了硬编码，并根据平均点数获得了中心点。

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

相反，我想给它一个边界框（两个岛），并根据窗口的大小选择缩放级别。

leaflet

— 迈克·麦凯
source

26

您可以简单地使用：

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

map.fitBounds(group.getBounds());

— 法哈特·阿巴斯
source

1

有用的答案-这是居中和缩放的一种更好的方法-在我只是手动计算居中之前。FitBounds是我需要的答案，但我发现您只需将两个坐标传递给fitBounds即可完成。

— Mike McKay 2013年

2

除非您已经创建了标记，否则请绝对使用下一个答案。

— 安迪

12

使用@Farhat的答案，我发现我所需要的只是传递一个数组数组：

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

— 迈克·麦凯
source

1

很明显，这在结尾处缺少右方括号。不知道为什么您要还原我的编辑。

— Jan Kyu Peblik

1

您对括号说的没错-谢谢。我会解决的。您的编辑也有一个逗号。

— Mike McKay

4

developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/…代码也实际上使用了结尾的逗号进行了测试。（因为生命太短，无法打扰格式毫无意义的行。）

— Jan Kyu Peblik

0

map.fitBounds() 如果您正在使用Google Map Polylines，它也可以很好地工作：

<!-- 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);

— 纳曼
source

为什么这个答案被否决？

— LeeGee

0

感谢@Mike McKay，这就是我做到的方式！;）

请注意，我在坐标中添加了一些额外内容作为内部填充，因此标记不在地图的侧面。这种方式看起来。


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

map.fitBounds([ ...coordinates ])

VUE.JS方式：

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 ])

— 绝望网
source