javascript 传单 maxBounds - 边界不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29191978/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Leaflet maxBounds - bounds do not work
提问by wolfmuc
I tried out Leafletjs maxBounds with example code I found at Mapbox.
我用我在 Mapbox 找到的示例代码尝试了 Leafletjs maxBounds。
Below you find my complete code, also in a jsfiddle here.
您可以在下面找到我的完整代码，也在此处的jsfiddle 中。
<!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="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></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: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}) .addTo(map);
L.marker([40.743, -74.176]) .addTo(map);
</script>
</div>
</body>
The jsfiddle result looks odd, I don't know why.
jsfiddle 结果看起来很奇怪，我不知道为什么。
Why doesn't the upper code work like the Mapbox example?
为什么上层代码不像 Mapbox 示例那样工作？
采纳答案by Alexandru Pufan
You must use bounds as an option of L.tileLayer, and not maxBounds.
您必须使用 bounds 作为 L.tileLayer 的选项，而不是 maxBounds。
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 中为 Leaflet.css 加载了错误的文件，正确的来源是：http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css
Finally, avoid to use percent sizes in JSFiddle, use pixel ones instead. Here's a working JSFiddle: http://jsfiddle.net/1zyL4q4a/4/
最后，避免在 JSFiddle 中使用百分比大小，而是使用像素大小。这是一个有效的 JSFiddle：http: //jsfiddle.net/1zyL4q4a/4/
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
bounds: mybounds,
maxZoom: 18,
minZoom: 16,
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}).addTo(map);
回答by wolfmuc
This is the (my) final code.
这是（我的）最终代码。
var map = L.map('map', {
maxZoom: 18,
minZoom: 16,
maxBounds: [
//south west
[40.712, -74.227],
//north east
[40.774, -74.125]
],
}).setView([40.743, -74.176], 17);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}) .addTo(map);
L.marker([40.743, -74.176]) .addTo(map);
