谷歌地圖API滑動屏幕滾動時發生衝突

Question

當用戶在移動設備上查看我的網站時，有時會遇到Google地圖滾動查看並覆蓋整個頁面的情況。他們不能再滾動，因爲當他們向上或向下滑動時，他們只會平移Google地圖中的視圖，而不會滾動網頁。

傳統我對移動修正是這樣的：

var mapOptions = { 
    draggable: false, 
    panControl: true, 
} 

這對谷歌地圖基本上禁止刷卡事件，以便用戶可以滑動到滾動網頁。如果用戶想要實際平移地圖，他們可以點擊平移按鈕UI。

從版本3.22開始，Google Maps API禁用了平移控制按鈕see official google doc。這對我產生了很大的問題 - 如果我禁用「可拖動」，則沒有其他方式來平移地圖

如何讓用戶能夠使用滑動手勢滾動網頁，同時讓他們平移地圖if他們想要？

Answer 1

這完全取決於您的網站的設計/流程。我可以提供一些解決方案，我必須根據與您相似的情況實施這些解決方案。

1）如果地圖不是您網頁的主要內容，您可以簡單地檢查瀏覽器是否爲移動瀏覽器，並使用靜態地圖圖像替換地圖div，當點擊該地圖時，會打開專用於地圖的頁面。

2）您可以在地圖頂部疊加一個動作，通過map.setOptions({draggable: true/false});切換地圖的禁用屬性，以便用戶可以自行打開和關閉此功能。

Answer 2

This previous answer works.並允許它可拖動非觸摸設備。

var myOptions = { 
    // your other options... 
    draggable: !("ontouchend" in document) 
}; 
map = new google.maps.Map(mapElem, myOptions);