在傳單地圖中偏移LatLngBounds

我有一張填充屏幕的地圖，以及屏幕底部顯示的非地圖內容的水平覆蓋圖。我想在地圖上顯示多段線，以便在地圖視圖內儘可能大，但不會在覆蓋內容下面隱藏。在傳單地圖中偏移LatLngBounds

下面是什麼我想，它幾乎工程，但根據地圖的當前視圖的縮放/位置給出了不同的結果。我需要一些獨立於當前地圖視圖的東西。

// `map` is the leaflet map 
// `polyline` is a leaflet polyline 

function fitBounds (latLngBounds, offsetY) { // offsetY in pixels 
    var zoom, southeast, southeastOffset, newBounds; 

    if (offsetY) { 
    zoom = map.getBoundsZoom(latLngBounds); 
    southeast = map.project(latLngBounds.getSouthEast(), zoom); 
    southeastOffset = new L.Point(southeast.x, southeast.y + offsetY); 
    newBounds = latLngBounds.extend(map.unproject(southeastOffset, zoom)); 
    } 

    map.fitBounds(newBounds || latLngBounds); 
} 

var contentHeight = 350; 
// this will be calculated and is the distance from the top of the 
// overlaid content to the bottom of the map 

fitBounds(polyline.getBounds(), contentHeight);

的map.getBoundsZoom(latLngBounds)和project/unproject似乎當地圖平移或縮放不同，以返回不同的值。我從docs瞭解到他們將獨立於當前的地圖視圖。

我使用的方法錯了，還是有不同的策略來實現我所需要的？謝謝。

來源

2017-08-11 Premasagar

在[leaflet插件列表]（http://leafletjs.com/plugins#events）上看到'leaflet-active-area'和'Leaflet.ControlledBounds'插件，它們實現了將調用修飾爲'fitBounds （）'以非常相似的方式。 – IvanSanchez

謝謝IvanSanchez。我已經成功地獲得了「小冊子活動區域」，從而解決了我的問題。我仍然感興趣爲什麼原始代碼不起作用，如果任何人都可以看到它並想評論。 – Premasagar

getBoundsZoom取決於當前地圖視圖的端口大小。因此，如果您使用不同的大小進行測試（例如，您的地圖容器填充了整個頁面寬度，並且可能因控制檯而有不同的瀏覽器窗口寬度），則結果將會不同。

如果您確定地圖容器大小沒有變化，並且您可以在JSBin/Plunker/JSFiddle上重現問題，那麼Leaflet中可能存在一個錯誤;隨時在問題跟蹤器中報告。

來源

2017-08-12 03:53:55 ghybs

謝謝。這可能是問題。 – Premasagar

在傳單地圖中偏移LatLngBounds

回答

相關問題