Leaflet maxBounds - 边界不起作用-前端问题

Leaflet maxBounds - bounds do not work(Leaflet maxBounds - 边界不起作用)

本文介绍了Leaflet maxBounds - 边界不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我用我在 Mapbox 找到的示例代码尝试了 Leafletjs maxBounds.

您可以在下面找到我的完整代码，也在 jsfiddle here 中.

Below you find my complete code, also in a jsfiddle here.

<!DOCTYPE HTML>
<html>
<head>
    <title>map - leaflet test bounds</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <!-- leafletjs -->
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
        <script src="aHR0cDovL2Nkbi5sZWFmbGV0anMuY29tL2xlYWZsZXQtMC43LjMvbGVhZmxldC5qcw=="></script>

        <style>
            body {
                margin: 0;
                padding: 0;
            }
            html, body, #map {
                height: 100%;
                width: 100%;
            }
        </style>
</head>

<body>
    <div id="map">
        <script>

            var southWest = L.latLng(40.712, -74.227),
                northEast = L.latLng(40.774, -74.125),
                mybounds = L.latLngBounds(southWest, northEast);

            var map = L.map('map').setView([40.743, -74.176], 17);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
                maxBounds: mybounds,
                maxZoom: 18,
                minZoom: 16,
                attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
            }) .addTo(map);

            L.marker([40.743, -74.176]) .addTo(map);

        </script>
    </div>        
</body>

jsfiddle 结果看起来很奇怪，我不知道为什么.

The jsfiddle result looks odd, I don't know why.

为什么上面的代码不像 Mapbox 的例子那样工作?

Why doesn't the upper code work like the Mapbox example?

推荐答案

你必须使用 bounds 作为 L.tileLayer 的选项，而不是 maxBounds.

You must use bounds as an option of L.tileLayer, and not maxBounds.

边界参考

另外，您似乎在 JSFiddle 中为 leaflet.css 加载了错误的文件，正确的来源是:http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css

Also, it seems you've loaded a wrong file for the leaflet.css in JSFiddle, the correct source is this: http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css

最后，避免在 JSFiddle 中使用百分比大小，而是使用像素大小.这是一个有效的 JSFiddle:http://jsfiddle.net/1zyL4q4a/4/

Finally, avoid to use percent sizes in JSFiddle, use pixel ones instead. Here's a working JSFiddle: http://jsfiddle.net/1zyL4q4a/4/

 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
            bounds: mybounds,
            maxZoom: 18,
            minZoom: 16,
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
  }).addTo(map);

这篇关于Leaflet maxBounds - 边界不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！