Question

我的地图（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);
},

Answer 1

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

这是一个应该让你开始的片段：

// 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。

Answer 2

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

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

Answer 3

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

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

Answer 4

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

Leaflet-active-area

此插件可让您将地图的一小部分用作活动区域。所有定位方法（setView，fitBounds，setZoom）将应用于此部分，而不是全部地图。

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

4 个答案: