Leaflet maxBounds - 边界不起作用 [英] Leaflet maxBounds - bounds do not work
问题描述
我使用我在Mapbox找到的示例代码<试用了Leafletjs maxBounds 。
您可以在下面找到我的完整代码，也可以在 jsfiddle在这里。
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="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>
jsfiddle结果看起来很奇怪，我不知道为什么。
The jsfiddle result looks odd, I don't know why.
为什么上面的代码不像Mapbox示例那样工作？
Why doesn't the upper code work like the Mapbox example?
推荐答案
你必须使用边界作为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/ / p>
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: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}).addTo(map);
这篇关于Leaflet maxBounds - 边界不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
