問題描述
我用 我在 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" />
<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 >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: '© <a >OpenStreetMap</a> contributors'
}).addTo(map);
這篇關于Leaflet maxBounds - 邊界不起作用的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！