使用Google Maps API在地圖上啓用滾輪縮放功能

我正在使用Google Maps API，並且希望能夠在移動設備上滾動瀏覽地圖，並且在使用滾輪向下滾動網頁時不需要縮放地圖。使用Google Maps API在地圖上啓用滾輪縮放功能

這裏是我的代碼：

var mapOptions = { 
    center: new google.maps.LatLng(51.605139, -2.918567), 
    zoom: 15, 
    scrollwheel: false, 
    draggable: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
};

這是好的，但我想實現的是使滾輪地圖上被點擊當只有變焦。

（所以在網頁上，當我點擊地圖，我可以放大它，或移動設備，當我點擊屏幕，那麼我可以捏和縮放/拖動地圖。）

我是否可以添加一個事件偵聽器，以便在雙擊或單擊時激活可拖動？
是否有可能使用API？

編輯

我曾嘗試下面的代碼，但它似乎並沒有工作：

google.maps.event.addListener(map, 'click', function (event) { 
    var mapOptions = { 
    draggable: true, 

    }; 
});

來源

2013-03-10 Richlewis

這應該工作：

 google.maps.event.addListener(map, 'click', function(event){ 
      this.setOptions({scrollwheel:true}); 
     });

來源

2013-03-10 22:02:14

感謝您對我有代碼段用它下面讓我的地圖我的工作怎麼想+1 – Baber 2014-04-13 11:08:22

THX爲好code.It的代碼片段真的幫助我給我的客戶質量的工作！ – 2015-01-19 12:09:36

只是小小的更新 - 在我的情況下，我也想拖動，所以我爲'拖'事件 – 2015-01-30 09:22:32

google.maps.event.addListener(map, 'mouseout', function(event){ 
this.setOptions({scrollwheel:false}); 
});

這除了Dr.Molle的回答外，這是一個方便的小考慮。

就像它出現，當鼠標離開地圖時，這將重新禁用滾輪縮放。

來源

2014-03-25 22:25:33 mrcni

謝謝你這個片段，它回答了我的問題，結合其他片段提供了這個問題的答案。 – Baber 2014-04-13 11:07:39

我找到了一個解決方案並收集了完整的代碼，用於禁用加載滾動並啓用點擊滾動縮放。

負載禁用滾動：滾輪：假的，聽在地圖上點擊事件，使滾輪：真實，

map.addListener('click', function() { 
    map.set('scrollwheel', true); 
});

請找我的博客的代碼：http://anasthecoder.blogspot.ae/

來源

2015-11-18 14:00:21 Ima

這是我一般做：

用戶與地圖（鼠標按下）相互作用 - >設置的可縮放
鼠標擱置在地圖超過1秒 - >設置縮放
鼠標離開地圖 - >設置爲不縮放

這通常被所做的工作。當用戶處於滾動頁面的思維模式時，接下來是地圖。當用戶想要放大/縮小時，他們需要與它進行交互或將指針放置一會兒。

的源代碼：

google.maps.event.addListener(map, 'mousedown', function(event){ 
    this.setOptions({scrollwheel:true}); 
    }); 
    google.maps.event.addListener(map, 'mouseover', function(event){ 
    self = this; 
    timer = setTimeout(function() { 
     self.setOptions({scrollwheel:true}); 
    }, 1000); 
    }); 
    google.maps.event.addListener(map, 'mouseout', function(event){ 
    this.setOptions({scrollwheel:false}); 
    clearTimeout(timer); 
    });

來源

2016-06-02 18:09:15

這是我的榜樣，它爲我工作。當頁面加載時，谷歌地圖（輪盤滾動）關閉，當您點擊地圖（滾輪滾動）打開。

var map = new google.maps.Map(document.getElementById('map-id'), { 
      scrollwheel: false, 
     }); 
     google.maps.event.addListener(map, 'mouseout', function(){ 
      this.setOptions({scrollwheel:false}); 
     }); 
     map.addListener('click', function() { 
      map.set('scrollwheel', true); 
     });

來源

2016-12-08 13:02:07

如果滾輪值爲false它將使真，&如果真讓假這將設置地圖，在地圖上的點擊。

function initMap() { 

     var florida = { 
     lat: 27.5814346, 
     lng: -81.0534459 
     }; 

     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 6, 
     center: florida, 
     scrollwheel: false 
     }); 


     google.maps.event.addListener(map, 'click', function(event) { 
     if (this.scrollwheel == false) { 
      this.setOptions({ 
      scrollwheel: true 
      }); 
     } else { 
      this.setOptions({ 
      scrollwheel: false 
      }); 
     } 
     }); 

    }

來源

2017-05-23 23:15:07 Carl

使用Google Maps API在地圖上啓用滾輪縮放功能

回答

相關問題