javascript - 防止重复 map 并在世界范围内继续拖动

标签 javascript maps leaflet draggable

有没有办法让传单不重复世界地图,并使 map 在拖动时保持在世界范围内?并在世界大小达到窗口大小时禁用缩小

enter image description here

最佳答案

要阻止图 block 重复,请使用 L.TileLayernoWrap 选项

If set to true, the tiles just won't load outside the world width (-180 to 180 longitude) instead of repeating.

http://leafletjs.com/reference.html#tilelayer-nowrap

如果您想停止平移超出定义的边界,请使用 L.MapmaxBounds 选项或调用 setMaxBounds 方法:

Restricts the view to the given geographical bounds, bouncing the user back when he tries to pan outside the view.

如果您想禁用超过特定级别的缩放,请使用 L.MapminZoommaxZoom 选项。您要做的是设置最小缩放级别并将其用作初始缩放。什么因素取决于 map 的元素大小和 tilelayer 的 tilesize。大多数 tileproviders 使用 256px²。在缩放 0 时,世界是 1 个图 block ,在缩放 1 时,2x2 图 block ,在 3 时,它是 4x4 等等。因此,如果您的 map 元素是 512px²,您的 minZoom 将是 1。

这是关于 Plunker 的演示:http://embed.plnkr.co/rP5NLQ/preview

关于javascript - 防止重复 map 并在世界范围内继续拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33105258/

相关文章:

javascript - 移动谷歌地图中心javascript api

asp.net - 多边形的国家行政级别

angularjs - Mapbox.js 不适用于 Angular.js

r - 如何使用 r 循环在传单 map 中添加多个多边形?

javascript - 如何在 Node.js 中将灰度图像矩阵转换为图像

javascript - jquery.inArray() 函数不起作用

ios - 用户 GPS 位置图标问题

javascript - 如何在 d3.js 中保留具有唯一 ID 的行一次

javascript - 标题未完全隐藏或滚动到顶部时,粘性菜单快速跳转到顶部

javascript - 传单 map 未加载图 block