5

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

4 に答える 4

13

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()、マップの中心をオフセットするために使用します。

完全な例を次に示します。

于 2013-07-23T03:04:14.653 に答える
3

複数のマーカーがあり、それらの境界でマップを中央に配置したいと同時に、コンテナーが重なっている場合は、fitBoundsオプション (paddingTopLeft、paddingBottomRight、padding) を使用できます。

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

于 2014-07-30T12:37:55.460 に答える