MapBox上的滾動頁面

我試圖在填充100％頁面的佈局上實現MapBox。我已禁用地圖縮放選項，但試圖在地圖填充視口的觸控設備上滾動時出現問題。我可以覆蓋這個或讓瀏覽器把它當作圖片嗎？MapBox上的滾動頁面

2013-08-06 devlondoner

這個例子進行了改進：這是缺少行是：

if (map.tap) map.tap.disable();

這將防止從地圖在觸摸設備上殺死自來水事件。

2013-10-24 13:44:37 tmcw

如[文檔]（https://www.mapbox.com/mapbox.js/example/v1.0.0/disable-zooming-panning/）中所述，此「禁用抽頭處理程序」 - 不會禁用地圖拖動在OP詢問的觸摸設備上 – squarecandy

刪除其餘的聽衆as in this example - 您可能還有的那個是dragging。

來源

2013-08-07 20:41:52 tmcw

是的，你可以通過設置小冊子功能做不擇手段從防止默認動作Mapbox聽衆：

L.DomEvent.preventDefault = function(e) {return;}

，以消除，否則將被禁止已經在瀏覽器設置圍繞元素的輪廓，你可以添加：

*:focus { 
    outline: none; 
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
}

這允許在我的觸摸設備上滾動，雖然我只在Android上測試過。請注意，這可能會對您的應用程序產生其他影響 - 這些可能會通過進入mapbox.js並僅從您需要的偵聽器中刪除此調用來阻止。

來源

2013-08-17 14:31:33 milohoffman

太棒了！這對我來說很好，但是現在iPad上的另一個用戶在點擊工具提示圖標時遇到問題。除非添加alert（）點擊事件，否則它們不會保持打開狀態。我被困在一個方法來解決這個問題。 – devlondoner

這看起來非常嚴厲。你基本上完全在地圖上加入了所有的功能。有些選項可以控制每個可能要禁用的元素，而其他元素則可以運行。 – squarecandy

對於那些要動態地啓用/禁用地圖框滾動/縮放等根據頁面大小（像我一樣），你可以嘗試：

$(document).ready(function() { 
    $(window).on('resize', updateMap); 
}); 

function updateMap() { 
    var width = $(window).width(); 
    if (width < 768) { 
    map.scrollWheelZoom.disable(); 
    map.doubleClickZoom.disable(); 
    map.dragging.disable(); 
    if (map.tap) map.tap.disable(); 
    } 
    else { 
    map.scrollWheelZoom.enable(); 
    map.doubleClickZoom.enable(); 
    map.dragging.enable(); 
    if (map.tap) map.tap.enable(); 
    } 
}

通過適當的幻數爲您的佈局替換768。假設jQuery。

來源

2015-09-24 13:14:52 CharlesA

嘗試添加

if (map.tap) map.dragging.disable();

來源

2015-12-12 11:58:31

的問題與在mapbox的dragging參數是它同時控制點擊和保持與使用觸摸鼠標或其它定點設備和所述刷運動拖拽。不確定任何其他答案都將此作爲主要問題。

我認爲OP的問題的核心是我們都喜歡點擊拖動並認爲它很容易使用，但我們不喜歡拖動拖動，因爲它干擾了滾動整個頁面。

這是我最終使用的代碼行。它取決於Modernizr和jQuery，但如果需要的話，您可以在沒有它們的情況下編寫類似的東西。

// disable dragging the map on touch devices only 
if ($('html').hasClass('touch')) map.dragging.disable();

來源

2016-05-19 04:36:46 squarecandy

MapBox上的滾動頁面

回答

相關問題