gpt4 book ai didi

javascript - Leaflet maxBounds - 边界不起作用

转载 作者:太空狗 更新时间:2023-10-29 14:06:01 24 4
gpt4 key购买 nike

我用 example code I found at Mapbox 试用了 Leafletjs maxBounds| .

下面是我的完整代码,也在 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: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}) .addTo(map);

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

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

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

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

最佳答案

这是(我的)最终代码。

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: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}) .addTo(map);

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

关于javascript - Leaflet maxBounds - 边界不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29191978/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com