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.

    <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="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

            body {
                margin: 0;
                padding: 0;
            html, body, #map {
                height: 100%;
                width: 100%;

    <div id="map">

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


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'

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



How do I can get a text of all the cells of the table using testcafe(如何使用 testcafe 获取表格中所有单元格的文本)
node_modules is not recognized as an internal or external command(node_modules 未被识别为内部或外部命令)
How can I create conditional test cases using Protractor?(如何使用 Protractor 创建条件测试用例?)
PhantomJS and clicking a form button(PhantomJS 并单击表单按钮)
Clicking #39;OK#39; on alert or confirm dialog through jquery/javascript?(在警报上单击“确定或通过 jquery/javascript 确认对话框?)
QunitJS-Tests don#39;t start: PhantomJS timed out, possibly due to a missing QUnit start() call(QunitJS-Tests 不启动:PhantomJS 超时,可能是由于缺少 QUnit start() 调用)