如何使用 Leaflet API 更改地图的位置中心? [英] How can I change the location center of a map using Leaflet API?

问题描述

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

My map (Mapbox) takes up the whole background of the site so the center is in the middle of the site. But the focus of the map for the user is on the right side because I have content overlapping the map on the left side. When leaflet grabs the location, it's from the center of the map, but it would be more convenient if I could set it to grab the location from the center of the right third of the site, so that way the user won't be centering the map on targets bordering content on the left half of the site.

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

Is there a way I could set the center or location focus of the leaflet API for the map?

这是我目前的设置方式，

Here's how I have it set up currently,

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);
},

推荐答案

您可以使用 panBy() 和 getSize() 的组合来偏移地图的宽度您的叠加层.

You can use a combo of panBy() and getSize() to offset the map the width of your overlay.

这里有一个片段可以帮助您入门:

Here's a snippet that should get you a started:

// 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() 来偏移地图中心.

In my example, my overlay is 33% of the width of the map. So I grab the size of the map area, then multiple by 0.15 (this was based on some experimenting to see what the best offset amount was) and use panBy() to offset the map center.

这是一个完整示例.

这篇关于如何使用 Leaflet API 更改地图的位置中心?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！