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

问题描述

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

解决方案

您可以使用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()来偏移地图中心.

这是完整的示例.

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.

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

解决方案

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

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.

Here's a full example.

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