如何使用 Leaflet API 更改地图的位置中心？

Posted 2023-04-14

【中文标题】如何使用 Leaflet API 更改地图的位置中心？

【英文标题】：How can I change the location center of a map using Leaflet API?

【发布时间】：2013-07-19 10:58:33

【问题描述】：

我的地图 (Mapbox) 占据了网站的整个背景，因此中心位于网站的中间。但是用户的地图焦点在右侧，因为我的内容与左侧的地图重叠。当传单抓取位置时，它来自地图的中心，但如果我可以将它设置为从站点右三分之一的中心抓取位置会更方便，这样用户就不会居中地图上的目标与站点左半部分的内容接壤。

有没有办法为地图设置传单 API 的中心或位置焦点？

这是我目前的设置方式，

mapOptions: 
        maxZoom: 18,
        zoomControl: false,
        worldCopyJump: true 
,

createMap: function() 
        Map.map =  L.map('map', Map.mapOptions);
        Map.layer = L.mapbox.tileLayer(Map.mapID, 
                unloadInvisibleTiles: true,
        ).addTo(Map.map);              
        Map.map.locate(setView: true);
        Map.map.addControl(L.mapbox.geocoderControl(Map.mapID));
        new L.Control.Zoom( position: 'topright' ).addTo(Map.map);
,

【参考方案1】：

您可以使用panBy() 和getSize() 的组合来偏移地图覆盖层的宽度。

这是一个可以帮助您入门的 sn-p：

// Calculate the offset
var offset = map.getSize().x*0.15;
// Then move the map
map.panBy(new L.Point(-offset, 0), animate: false);

在我的示例中，我的叠加层是地图宽度的 33%。所以我抓取地图区域的大小，然后乘以 0.15（这是基于一些实验，看看最佳偏移量是多少）并使用panBy() 来偏移地图中心。

这是full example。

【讨论】：

太棒了，很高兴为您提供帮助。

【参考方案2】：

如果您有多个标记并希望在其边界中将地图居中，同时您有重叠的容器，则可以使用 fitBounds 选项（paddingTopLeft、paddingBottomRight、padding）。

http://leafletjs.com/reference.html#map-paddingtopleft

【参考方案3】：

首先，您需要知道地图上要居中的点的经度和纬度。然后很简单，只需调用 Map.map.setView 传入您的坐标和缩放级别。 API参考：http://leafletjs.com/reference.html#map-set-methods

如果您不知道自己的坐标，那么您可以通过反复试验找到它，只需创建一个标记并将其添加到地图中。

【讨论】：

setView() 正是我所寻找的，在您的链接中有所描述。

【参考方案4】：

ghybs 在GIS 上找到了这个解决方案，它帮助我解决了这个问题：

Leaflet-active-area

此插件允许您将地图的较小部分用作活动区域。所有定位方法（setView、fitBounds、setZoom）都将应用在这部分而不是所有地图上。