Bật bánh xe cuộn trên bản đồ khi nhấp bằng API Google Maps

Question

Tôi đang sử dụng Google Maps API và muốn có thể cuộn qua bản đồ trên thiết bị di động và không thu phóng bản đồ khi cuộn xuống một trang web bằng bánh cuộn.

Dưới đây là mã của tôi:

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

Điều này là tốt nhưng những gì tôi muốn đạt được là phép scrollwheel chỉ phóng to khi bản đồ được nhấp.

(Vì vậy, trên trang web, khi tôi nhấp vào bản đồ, tôi có thể zoom vào nó, hoặc một thiết bị di động, khi tôi nhấn vào màn hình, sau đó tôi có thể véo và zoom/kéo bản đồ xung quanh.)

Tôi có thể thêm trình xử lý sự kiện để kích hoạt khả năng kéo chỉ khi nhấp đúp hoặc nhấp chuột không?
Có thể sử dụng API không?

---

EDIT

Tôi đã thử đoạn code sau, nhưng nó dường như không làm việc:

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

    }; 
}); 

Answer 1

này nên làm việc:

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

Answer 2

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

này là một chút xem xét tiện dụng ngoài câu trả lời của Dr.Molle.

giống như nó xuất hiện, thao tác này sẽ vô hiệu hóa tính năng cuộn vòng cuộn khi chuột rời khỏi bản đồ.

Answer 3

Tôi đã tìm thấy giải pháp và thu thập mã hoàn chỉnh để tắt cuộn khi tải và cho phép cuộn thu phóng khi nhấp.

Disable cuộn trên tải: scrollwheel: false, Nghe nhấp kiện trên bản đồ và cho phép scrollwheel: đúng,

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

Hãy tìm mã trong blog của tôi: http://anasthecoder.blogspot.ae/

Answer 4

Đây là những gì tôi thường làm:

Người dùng tương tác với bản đồ (mousedown) -> đặt zoomable
Chuột nằm trên bản đồ cho hơn 1 giây -> thiết lập Zoomable
chuột đi ra khỏi bản đồ -> thiết lập không Zoomable

này thường được việc làm. Khi người dùng đang trong tư duy cuộn trang, bản đồ sẽ theo sau. Khi người dùng muốn phóng to/thu nhỏ, họ cần phải tương tác với nó hoặc có con trỏ ở đó trong một thời gian ngắn.

Mã nguồn:

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

Answer 5

Đây là ví dụ của tôi và nó làm việc cho tôi. Khi tải trang, bản đồ google (cuộn bánh xe) bị tắt, khi bạn nhấp vào bản đồ (cuộn bánh xe) được bật.

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

Answer 6

Điều này sẽ đặt bản đồ, khi nhấp vào bản đồ nếu giá trị bánh xe sai, nó sẽ làm cho đúng, & nếu đúng sẽ sai.

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

    }