Включить масштабирование прокрутки на карте при нажатии с помощью API Карт Google

Я использую API Карт Google и хочу иметь возможность прокручивать карту мимо мобильного устройства и не иметь масштабирования карты при прокрутке веб-страницы используя колесо прокрутки.

Здесь мой код:

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

Это прекрасно, но я хотел бы достичь включения масштабирования scrollwheel только при нажатии на карту.

(Так что на веб-странице, когда я нажимаю на карту, я могу увеличить ее или мобильное устройство, когда я нажимаю на экран, тогда я могу ущипнуть и масштабировать/перетаскивать карту.)

Можно ли добавить прослушиватель событий для активации перетаскивания только с двойным щелчком или одним кликом?
Возможно ли использование API?

ИЗМЕНИТЬ

Я пробовал следующий код, но он не работает:

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

  };
});

Ответ 1

Это должно работать:

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

Ответ 2

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

Это удобное небольшое рассмотрение в дополнение к ответу Dr.Molle.

как только он появится, это приведет к повторному отключению масштабирования прокрутки, когда мышь покинет карту.

Ответ 3

Я нашел решение и собрал полный код для отключения прокрутки при загрузке и включения прокрутки масштабирования при нажатии.

Отключить прокрутку при загрузке: scrollwheel: false, Прослушайте клик на карте и включите scrollwheel: true,

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

Введите код в своем блоге: http://anasthecoder.blogspot.ae/

Ответ 4

Это то, что я обычно делаю:

Пользователь взаимодействует с картой (mousedown) → set zoomable
Мышь лежит на карте более 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);
  });

Ответ 5

Это мой пример, и он работает для меня. Когда страница загружается, карта google (прокрутка колеса) отключена, когда вы нажимаете на карту (колесико), включается.

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

Ответ 6

это установит карту, щелкнув по карте, если значение scrollwheel будет ложным, это сделает его истинным, а если true сделает 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
          });
        }
      });

    }

Ответ 7

Согласно официальной документации Google, для того, чтобы она отлично работала для мобильных устройств и веб-сайтов, используйте это:

var map = new google.maps.Map(document.getElementById(mapid), {
        gestureHandling: 'greedy',
});