Tắt tính năng thu phóng con lăn của chuột trên Google Maps được nhúng

198
holiveira 2014-02-25 05:54.

Tôi đang làm việc trên một trang WordPress nơi các tác giả thường nhúng Google Maps bằng iFrames trong hầu hết các bài đăng.

Có cách nào để tắt tính năng thu phóng thông qua con lăn chuột trên tất cả chúng bằng Javascript không?

30 answers

255
Massa 2014-03-22 09:22.

Tôi cũng gặp phải vấn đề tương tự: khi cuộn trang thì con trỏ ở trên bản đồ, nó bắt đầu phóng to / thu nhỏ bản đồ thay vì tiếp tục cuộn trang. :(

Vì vậy, tôi giải quyết này đặt một divvới một .overlaychính xác trước mỗi GMap iframechèn, xem:

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

Trong CSS của tôi, tôi đã tạo lớp:

.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

Div sẽ bao phủ bản đồ, ngăn chặn các sự kiện con trỏ đến nó. Nhưng nếu bạn nhấp vào div, nó sẽ trở nên trong suốt với các sự kiện con trỏ, kích hoạt lại bản đồ!

Tôi hy vọng được giúp đỡ bạn :)

136
nathanielperales 2014-08-31 17:40.

Tôi đã thử câu trả lời đầu tiên trong cuộc thảo luận này và nó không hiệu quả với tôi cho dù tôi đã làm gì vì vậy tôi đã đưa ra giải pháp của riêng mình:

Bao bọc iframe bằng một lớp (.maps trong ví dụ này) và lý tưởng là nhúng mã phản hồi: http://embedresponsently.com/ - Thay đổi CSS của iframe thành pointer-events: nonevà sau đó sử dụng hàm nhấp của jQuery thành phần tử mẹ, bạn có thể thay đổi iframe css đếnpointer-events:auto

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

Tôi chắc rằng có một cách duy nhất JavaScript để làm điều này, nếu ai đó muốn thêm vào điều này, hãy thoải mái.

Cách JavaScript để kích hoạt lại sự kiện con trỏ khá đơn giản. Chỉ cần cung cấp một Id cho iFrame (tức là "iframe"), sau đó áp dụng sự kiện onclick cho div cointainer:

onclick="document.getElementById('iframe').style.pointerEvents= 'auto'"

<div class="maps" onclick="document.getElementById('iframe').style.pointerEvents= 'auto'">
   <iframe id="iframe" src="" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
54
czerasz 2014-09-18 19:12.

Tôi đã mở rộng giải pháp @nathanielperales.

Bên dưới mô tả hành vi:

  • nhấp vào bản đồ để cho phép cuộn
  • khi chuột rời khỏi bản đồ, hãy tắt cuộn

Bên dưới mã javascript:

// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function (event) {
  var that = $(this);

  that.on('click', onMapClickHandler);
  that.off('mouseleave', onMapMouseleaveHandler);
  that.find('iframe').css("pointer-events", "none");
}

var onMapClickHandler = function (event) {
  var that = $(this);

  // Disable the click handler until the user leaves the map area
  that.off('click', onMapClickHandler);

  // Enable scrolling zoom
  that.find('iframe').css("pointer-events", "auto");

  // Handle the mouse leave event
  that.on('mouseleave', onMapMouseleaveHandler);
}

// Enable map zooming with mouse scroll when the user clicks the map
$('.maps.embed-container').on('click', onMapClickHandler);

đây là một ví dụ về jsFiddle .

31
cHaMs 2015-04-23 22:28.

Tôi đang chỉnh sửa lại mã được viết bởi #nathanielperales, nó thực sự phù hợp với tôi. Đơn giản và dễ bắt nhưng công việc của nó chỉ một lần. Vì vậy, tôi đã thêm mouseleave () trên JavaScript. Ý tưởng chuyển thể từ #Bogdan Và bây giờ nó đã hoàn hảo. Thử đi. Tín dụng được chuyển đến #nathanielperales và #Bogdan. Tôi chỉ kết hợp cả hai ý tưởng. Cảm ơn mọi người. Tôi hy vọng điều này cũng sẽ giúp những người khác ...

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'>  </iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

Ứng thích ứng vượt qua

Và đây là một ví dụ về jsFiddle.

25
Hassam Raja 2014-05-21 15:45.

Có nó khá dễ dàng. Tôi phải đối mặt với một vấn đề tương tự. Chỉ cần thêm thuộc tính css "pointer-events" vào iframe div và đặt nó thành 'none' .

Ví dụ: <iframe style = "pointer-events: none" src = ........>

SideNote: Bản sửa lỗi này sẽ vô hiệu hóa tất cả các sự kiện chuột khác trên bản đồ. Nó hoạt động với tôi vì chúng tôi không yêu cầu bất kỳ tương tác nào của người dùng trên bản đồ.

19
borchvm 2014-06-06 02:07.
var mapOptions = {
   scrollwheel: false,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};
13
Grzegorz 2014-02-26 01:23.

Sau khi thực hiện một số nghiên cứu, bạn có 2 lựa chọn. Vì api bản đồ mới có nhúng iframe dường như không hỗ trợ việc tắt con lăn chuột.

Đầu tiên sẽ là sử dụng bản đồ google cũ ( https://support.google.com/maps/answer/3045828?hl=vi ).

Thứ hai sẽ là tạo một hàm javascript để đơn giản hóa việc nhúng bản đồ cho mỗi nhận xét và sử dụng các tham số (mã mẫu chỉ cho vị trí điểm không hiển thị giải pháp chính xác)

function createMap(containerid, parameters) {
  var mymap = document.getElementById(containerid),
  map_options = {
    zoom: 13,
    scrollwheel: false,
    /* rest of options */
  },
  map = new google.maps.Map(mymap, map_options);

  /* 'rest of code' to take parameters into account */
}
8
Bogdan 2014-10-03 23:12.

Có một giải pháp tuyệt vời và dễ dàng.

Bạn cần thêm một lớp tùy chỉnh trong css của mình để đặt các sự kiện con trỏ vào canvas ánh xạ thành không:

.scrolloff{
   pointer-events: none;
}

Sau đó, với jQuery, bạn có thể thêm và xóa lớp đó dựa trên các sự kiện khác nhau, ví dụ:

    $( document ).ready(function() {

    // you want to enable the pointer events only on click;

        $('#map_canvas').addClass('scrolloff'); // set the pointer events to none on doc ready
        $('#canvas').on('click', function() {
            $('#map_canvas').removeClass('scrolloff'); // set the pointer events true on click
        });

    // you want to disable pointer events when the mouse leave the canvas area;

     $( "#map_canvas" ).mouseleave(function() {
          $('#map_canvas').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
     });    
});

Tôi đã tạo một ví dụ trong jsfiddle , hy vọng điều đó sẽ hữu ích!

8
RSiqueira 2016-04-15 13:34.

Tôi chỉ đăng ký một tài khoản trên Develop.google.com và nhận mã thông báo để gọi API Maps và chỉ cần vô hiệu hóa tài khoản như thế này (con lăn: false):

    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('container_google_maps'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8,
            scrollwheel: false
        });
    }
7
user1588572 2016-12-06 08:06.

Đây là cách tiếp cận của tôi. Tôi thấy nó dễ dàng triển khai trên các trang web khác nhau và sử dụng nó mọi lúc

CSS và JavaScript:

<style type="text/css">
.scrolloff iframe   {
    pointer-events: none ;
}
</style>

<script type="text/javascript">
function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click

}

function scrollOff() {
    $('#map').addClass('scrolloff'); 

}
</script>

Trong HTML, bạn sẽ muốn bọc iframe trong một div. <div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" >

function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click
   
}

function scrollOff() {
    $('#map').addClass('scrolloff'); // set the pointer events true on click
    
}
.scrolloff iframe   {
        pointer-events: none ;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" ><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23845.03946309692!2d-70.0451736316453!3d41.66373705082399!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89fb159980380d21%3A0x78c040f807017e30!2sChatham+Tides!5e0!3m2!1sen!2sus!4v1452964723177" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>

Hy vọng điều này sẽ giúp bất kỳ ai đang tìm kiếm một giải pháp đơn giản.

5
manish_s 2015-07-07 04:01.

Đây là một giải pháp đơn giản. Chỉ cần đặt pointer-events: noneCSS thành <iframe>để tắt cuộn chuột.

<div id="gmap-holder">
    <iframe width="100%" height="400" frameborder="0" style="border:0; pointer-events:none"
            src="https://www.google.com/maps/embed/v1/place?q=XXX&key=YYY"></iframe>
</div>

Nếu bạn muốn kích hoạt cuộn chuột khi người dùng nhấp vào bản đồ, hãy sử dụng mã JS sau. Nó cũng sẽ tắt cuộn chuột một lần nữa khi chuột di chuyển ra khỏi bản đồ.

$(function() {
    $('#gmap-holder').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'all');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
})
4
NadirShah Rahat 2015-09-14 13:01.

Để tắt tính năng thu phóng con lăn của chuột trên Google Maps được nhúng, bạn chỉ cần đặt các sự kiện con trỏ thuộc tính css của iframe thành không:

<style>
#googlemap iframe {
    pointer-events:none;
}
</style>

Đó là tất cả .. Khá gọn gàng phải không?

<div id="googlemap">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3648.6714814904954!2d90.40069809681577!3d23.865796688563787!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c425897f1f09%3A0x2bdfa71343f07395!2sArcadia+Green+Point%2C+Rd+No.+16%2C+Dhaka+1230%2C+Bangladesh!5e0!3m2!1sen!2sin!4v1442184916780" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
4
Qatan 2016-03-29 23:30.

Đối với tôi, giải pháp tốt nhất là chỉ cần sử dụng như thế này:

HTML:

<div id="google-maps">
<iframe frameborder="0" height="450" src="***embed-map***"  width="100"</iframe>
</div>

CSS:

#google-maps iframe { pointer-events:none; }

JS:

<script>
  $(function() {
    $('#google-maps').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'auto');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
  })
</script>

KẾT QUẢ

Cân nhắc:

Tốt nhất sẽ là thêm lớp phủ có độ trong suốt đậm hơn với văn bản: " Nhấp để duyệt " khi bánh xe chuột bị tắt. Nhưng khi nó được kích hoạt (sau khi bạn nhấp vào) thì độ trong suốt với văn bản sẽ biến mất và người dùng có thể duyệt bản đồ như mong đợi. Bất kỳ manh mối làm thế nào để làm điều đó?

3
Mohan 2015-01-10 04:13.

Thêm phong cách pointer-events:none;này hoạt động tốt

<iframe style="pointer-events:none;" src=""></iframe>
3
Andrei 2015-08-07 03:05.

Cách đơn giản nhất để làm điều đó là sử dụng phần tử giả như :beforehoặc :after.
Phương pháp này sẽ không yêu cầu bất kỳ phần tử html hoặc jquery bổ sung nào.
Nếu chúng ta có cấu trúc html này chẳng hạn:

<div class="map_wraper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d405689.7826944034!2d-122.04109805!3d37.40280355!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb68ad0cfc739%3A0x7eb356b66bd4b50e!2sSilicon+Valley%2C+CA!5e0!3m2!1sen!2sro!4v1438864791455" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

Sau đó, tất cả những gì chúng ta cần làm là tạo trình bao bọc liên quan đến phần tử giả mà chúng ta sẽ tạo để ngăn việc cuộn

.map_wraper{
    position:relative;
}

Sau đó, chúng tôi sẽ tạo phần tử giả sẽ được định vị trên bản đồ để ngăn việc cuộn:

.map_wraper:after{
    background: none;
    content: " ";
    display: inline-block;
    font-size: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}

Và bạn đã hoàn tất, không có jquery không có thêm phần tử html! Đây là một ví dụ jsfiddle đang hoạt động: http://jsfiddle.net/e6j4Lbe1/

3
iXzellent 2016-02-16 05:49.

Đây là giải pháp đơn giản của tôi.

Đặt iframe của bạn trong một div với một lớp gọi là "bản đồ" chẳng hạn.

Đây sẽ là CSS cho iframe của bạn

.maps iframe { pointer-events: none }

Và đây là một đoạn javascript nhỏ sẽ đặt thuộc tính con trỏ-sự kiện của iframe thành "tự động" khi bạn di chuột qua phần tử div trong ít nhất 1 giây (phù hợp nhất với tôi - đặt nó thành bất kỳ thứ gì bạn thích) và xóa thời gian chờ / đặt nó thành "none" một lần nữa khi chuột rời khỏi phần tử.

var maptimer;

$(".maps").hover(function(){
    maptimer = setTimeout(function(){
        $(".maps").find("iframe").css("pointer-events", "auto");
    },1000);
},function(){
    clearTimeout(maptimer);
    $(".maps").find("iframe").css("pointer-events", "none");
});

Chúc mừng.

3
Emiliano Díaz 2015-02-04 05:59.

Tôi đã tạo một plugin jQuery rất đơn giản để giải quyết vấn đề. Kiểm tra nó tại https://diazemiliano.github.io/googlemaps-scrollprevent

(function() {
  $(function() {
    $("#btn-start").click(function() {
      $("iframe[src*='google.com/maps']").scrollprevent({
        printLog: true
      }).start();
      return $("#btn-stop").click(function() {
        return $("iframe[src*='google.com/maps']").scrollprevent().stop();
      });
    });
    return $("#btn-start").trigger("click");
  });
}).call(this);
Edit in JSFiddle Result JavaScript HTML CSS .embed-container {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.embed-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.mapscroll-wrap {
  position: static !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
  width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a>  <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>

2
Maciek Kwapinski 2014-12-12 02:27.

Sử dụng câu trả lời từ @nathanielperales, tôi đã thêm chức năng di chuột vì nó hoạt động tốt hơn khi người dùng mất tập trung vào bản đồ để dừng cuộn lại :)

$(function(){
    $('.mapa').hover(function(){
        stopScroll();},
                     function () {
    $('.mapa iframe').css("pointer-events", "none");
    });
});

function stopScroll(){
$('.mapa').click(function () {
    $('.mapa iframe').css("pointer-events", "auto");
});
}
2
bencergazda 2015-05-29 23:04.

Các biến thể trên một chủ đề: một giải pháp đơn giản với jQuery, không cần chỉnh sửa CSS.

// make iframe active on click, disable on mouseleave
$('iframe.google_map').each( function(i, iframe) {
    $(iframe).parent().hover( // make inactive on hover
        function() { $(iframe).css('pointer-events', 'none');
    }).click( // activate on click
        function() { $(iframe).css('pointer-events', 'auto');
    }).trigger('mouseover'); // make it inactive by default as well
});

Trình nghe di chuột được gắn với phần tử mẹ, vì vậy nếu phần tử mẹ hiện tại lớn hơn, bạn chỉ cần bọc iframe bằng một div trước dòng thứ 3.

Hy vọng nó sẽ hữu ích cho ai đó.

1
EffectiX 2014-11-26 05:09.

Tôi tình cờ gặp vấn đề này và sử dụng một số kết hợp của hai câu trả lời rất hữu ích cho câu hỏi này: câu trả lời của czerasz và câu trả lời của massa .

Cả hai đều có rất nhiều sự thật, nhưng ở đâu đó trong các thử nghiệm của tôi, tôi phát hiện ra rằng một cái không hoạt động cho di động và hỗ trợ IE kém (chỉ hoạt động trên IE11). Đây là giải pháp của nathanielperales, sau đó được mở rộng bởi czerasz, dựa trên css sự kiện con trỏ và không hoạt động trên thiết bị di động (không có con trỏ trong thiết bị di động) và nó không hoạt động trên bất kỳ phiên bản IE nào không phải là v11 . Thông thường, tôi sẽ không quan tâm ít hơn, nhưng có rất nhiều người dùng ngoài kia và chúng tôi muốn có chức năng nhất quán, vì vậy tôi đã sử dụng giải pháp lớp phủ, sử dụng trình bao bọc để mã dễ dàng hơn.

Vì vậy, đánh dấu của tôi trông giống như sau:

<div class="map embed-container">
  <div id="map-notice" style="display: block;"> {Tell your users what to do!} </div>
  <div class="map-overlay" style="display: block;"></div>
  <iframe style="width:100%" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3785.684302567802!2d-66.15578327375803!3d18.40721382009222!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c036a35d02b013f%3A0x5962cad95b9ec7f8!2sPlaza+Del+Sol!5e0!3m2!1sen!2spr!4v1415284687548" width="633" height="461" frameborder="0"></iframe>
</div>

Sau đó, các phong cách như thế này:

.map.embed-container {
  position:relative;
}

.map.embed-container #map-notice{
  position:absolute;
  right:0;
  top:0;
  background-color:rgb(100,100,100);/*for old IE browsers with no support for rgba()*/
  background-color: rgba(0,0,0,.50);
  color: #ccc;
  padding: 8px;
}
.map.embed-container .map-overlay{
  height:100%;
  width:100%;
  position:absolute;
  z-index:9999;
  background-color:rgba(0,0,0,0.10);/*should be transparent but this will help you see where the overlay is going in relation with the markup*/
}

Cuối cùng là kịch bản:

//using jquery...
var onMapMouseleaveHandler = function (event) {
  $('#map-notice').fadeIn(500);
  var elemento = $$(this);
  elemento.on('click', onMapClickHandler);
  elemento.off('mouseleave', onMapMouseleaveHandler);
  $('.map-overlay').fadeIn(500);
}

var onMapClickHandler = function (event) {
  $('#map-notice').fadeOut(500);
  var elemento = $$(this);
  elemento.off('click', onMapClickHandler);
  $('.map-overlay').fadeOut(500);
  elemento.on('mouseleave', onMapMouseleaveHandler);
}
$('.map.embed-container').on('click', onMapClickHandler);

Tôi cũng đã thêm giải pháp đã thử nghiệm của mình trong ý chính GitHub , nếu bạn muốn tải nội dung từ đó ...

1
Jean 2015-09-09 02:45.

Đây là một giải pháp với CSS và Javascript (tức là. Jquery nhưng cũng hoạt động với Javascript thuần túy). Đồng thời, bản đồ phản hồi. Tránh để bản đồ phóng to khi cuộn, nhưng bản đồ có thể được kích hoạt bằng cách nhấp vào đó.

HTML / JQuery Javascript

<div id="map" onclick="$('#googlemap').css('pointerEvents','auto'); return true;"> 
    <iframe id="googlemap" src="http://your-embed-url" height="350"></iframe>
</div>

CSS

#map {
    position: relative; 
    padding-bottom: 36%; /* 16:9 ratio for responsive */ 
    height: 0; 
    overflow: hidden; 
    background:transparent; /* does the trick */
    z-index:98; /* does the trick */
}
#map iframe { 
    pointer-events:none; /* does the trick */
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
    z-index:97; /* does the trick */
} 

Chúc vui vẻ !

1
Gerry 2016-03-24 18:05.

Trong Google Maps v3 giờ đây bạn có thể tắt cuộn để thu phóng, điều này dẫn đến trải nghiệm người dùng tốt hơn nhiều. Các chức năng bản đồ khác sẽ vẫn hoạt động và bạn không cần thêm div. Tôi cũng nghĩ rằng nên có một số phản hồi cho người dùng để họ có thể xem khi tính năng cuộn được bật, vì vậy tôi đã thêm đường viền bản đồ.

// map is the google maps object, '#map' is the jquery selector
preventAccidentalZoom(map, '#map'); 

// Disables and enables scroll to zoom as appropriate. Also
// gives the user a UI cue as to when scrolling is enabled.
function preventAccidentalZoom(map, mapSelector){
  var mapElement = $(mapSelector);

  // Disable the scroll wheel by default
  map.setOptions({ scrollwheel: false })

  // Enable scroll to zoom when there is a mouse down on the map.
  // This allows for a click and drag to also enable the map
  mapElement.on('mousedown', function () {
    map.setOptions({ scrollwheel: true });
    mapElement.css('border', '1px solid blue')
  });

  // Disable scroll to zoom when the mouse leaves the map.
  mapElement.mouseleave(function () {
    map.setOptions({ scrollwheel: false })
    mapElement.css('border', 'none')
  });
};
1
Jonny Jordan 2016-10-21 12:07.

Điều này sẽ cung cấp cho bạn một Bản đồ Google đáp ứng sẽ dừng việc cuộn trên iframe, nhưng khi bạn nhấp vào sẽ cho phép bạn thu phóng.

Sao chép và dán nó vào html của bạn nhưng thay thế liên kết iframe bằng liên kết của riêng bạn. Anh ấy là một bài báo về nó với một ví dụ: Tắt tính năng thu phóng con lăn của chuột trên khung nội tuyến Google Map được nhúng

<style>
    .overlay {
    background:transparent;
    position:relative;
    width:100%; /* your iframe width */
    height:480px; /* your iframe height */
    top:480px; /* your iframe height */
    margin-top:-480px; /* your iframe height */
    }
</style>
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="100%" height="480"></iframe>
0
Chad Warren 2014-07-04 06:38.

Đây sẽ là cách tiếp cận của tôi cho điều này.

Đưa cái này vào tệp main.js của tôi hoặc tệp tương tự:

// Create an array of styles.
var styles = [
                {
                    stylers: [
                        { saturation: -300 }

                    ]
                },{
                    featureType: 'road',
                    elementType: 'geometry',
                    stylers: [
                        { hue: "#16a085" },
                        { visibility: 'simplified' }
                    ]
                },{
                    featureType: 'road',
                    elementType: 'labels',
                    stylers: [
                        { visibility: 'off' }
                    ]
                }
              ],

                // Lagitute and longitude for your location goes here
               lat = -7.79722,
               lng = 110.36880,

              // Create a new StyledMapType object, passing it the array of styles,
              // as well as the name to be displayed on the map type control.
              customMap = new google.maps.StyledMapType(styles,
                  {name: 'Styled Map'}),

            // Create a map object, and include the MapTypeId to add
            // to the map type control.
              mapOptions = {
                  zoom: 12,
                scrollwheel: false,
                  center: new google.maps.LatLng( lat, lng ),
                  mapTypeControlOptions: {
                      mapTypeIds: [google.maps.MapTypeId.ROADMAP],

                  }
              },
              map = new google.maps.Map(document.getElementById('map'), mapOptions),
              myLatlng = new google.maps.LatLng( lat, lng ),

              marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: "images/marker.png"
              });

              //Associate the styled map with the MapTypeId and set it to display.
              map.mapTypes.set('map_style', customMap);
              map.setMapTypeId('map_style');

Sau đó, chỉ cần chèn một div trống ở nơi bạn muốn bản đồ xuất hiện trên trang của mình.

<div id="map"></div>

Rõ ràng là bạn cũng sẽ cần gọi trong API Google Maps. Tôi chỉ cần tạo một tệp có tên mapi.js và ném nó vào thư mục / js của tôi. Tệp này cần được gọi trước javascript ở trên.

`window.google = window.google || {};
google.maps = google.maps || {};
(function() {

  function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }

  var modules = google.maps.modules = {};
  google.maps.__gjsload__ = function(name, text) {
    modules[name] = text;
  };

  google.maps.Load = function(apiLoad) {
    delete google.maps.Load;
    apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/[email protected]\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/[email protected]\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"[email protected]"],[["http://khm0.googleapis.com/kh?v=135\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=135\u0026hl=en-US\u0026"],null,null,null,1,"135"],[["http://mt0.googleapis.com/[email protected]\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/[email protected]\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"[email protected]"],[["http://mt0.googleapis.com/[email protected],[email protected]\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/[email protected],[email protected]\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"[email protected],[email protected]"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=80\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=80\u0026hl=en-US\u0026"],null,null,null,null,"80"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0","3.14.0"],[2635921922],1,null,null,null,null,0,"",null,null,0,"http://khm.googleapis.com/mz?v=135\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],0],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],3],[null,null,[null,"en-US","US",null,18],0],[null,null,[null,"en-US","US",null,18],3],[null,null,[null,"en-US","US",null,18],6],[null,null,[null,"en-US","US",null,18],0]]], loadScriptTime);
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0/main.js");
})();`

Khi bạn gọi tệp mapi.js, hãy chắc chắn rằng bạn chuyển nó thuộc tính false sensor.

I E: <script type="text/javascript" src="js/mapi.js?sensor=false"></script>

Phiên bản 3 mới của API yêu cầu bao gồm cảm biến vì một số lý do. Đảm bảo bạn bao gồm tệp mapi.js trước tệp main.js của mình.

0
user956584 2014-07-12 02:17.

Đối với google maps v2 - GMap2:

ar map = new GMap2(document.getElementById("google_map"));
map.disableScrollWheelZoom();
0
Frank Dark 2015-03-28 07:30.

nếu bạn có iframe sử dụng API nhúng bản đồ của Google như thế này:

 <iframe width="320" height="400" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

bạn có thể thêm kiểu css này: pointer-event: none; ES.

<iframe width="320" height="400" frameborder="0" style="pointer-event:none;" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>
0
squarecandy 2016-03-31 15:11.

Đây là ý kiến ​​của tôi về câu trả lời @nathanielperales được mở rộng bởi @chams, hiện được tôi mở rộng lần nữa.

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div> 

jQuery

// we're doing so much with jQuery already, might as well set the initial state
$('.maps iframe').css("pointer-events", "none");

// as a safety, allow pointer events on click
$('.maps').click(function() {
  $(this).find('iframe').css("pointer-events", "auto");
});


$('.maps').mouseleave(function() {
  // set the default again on mouse out - disallow pointer events
  $(this).find('iframe').css("pointer-events", "none");
  // unset the comparison data so it doesn't effect things when you enter again
  $(this).removeData('oldmousepos');
});

$('.maps').bind('mousemove', function(e){
  $this = $(this);
  // check the current mouse X position
  $this.data('mousepos', e.pageX);
  // set the comparison data if it's null or undefined
  if ($this.data('oldmousepos') == null) {
    $this.data('oldmousepos', $this.data('mousepos'));
  }
  setTimeout(function(){
    // some left/right movement - allow pointer events
    if ($this.data('oldmousepos') != $this.data('mousepos')) {
      $this.find('iframe').css("pointer-events", "auto");
    }
    // set the compairison variable
    $this.data('oldmousepos', $this.data('mousepos'));
  }, 300);
  console.log($this.data('oldmousepos')+ ' ' + $this.data('mousepos'));
});
0
T.Todua 2016-10-25 08:58.

Đơn giản nhất :

<div id="myIframe" style="width:640px; height:480px;">
   <div style="background:transparent; position:absolute; z-index:1; width:100%; height:100%; cursor:pointer;" onClick="style.pointerEvents='none'"></div>
   <iframe src="https://www.google.com/maps/d/embed?mid=XXXXXXXXXXXXXX" style="width:640px; height:480px;"></iframe>
</div>
0
Akriti 2017-05-23 21:00.

Thêm cái này vào tập lệnh của bạn:

function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: uluru,
        scrollwheel: false,
        disableDefaultUI: true,
        disableDoubleClickZoom: true
    });
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
});
}
0
Djordje Arsenovic 2017-08-01 04:18.

Đây là giải pháp của tôi cho vấn đề, tôi đang xây dựng một trang web WP, vì vậy có một chút mã php ở đây. Nhưng mấu chốt là scrollwheel: false,ở đối tượng bản đồ.

function initMap() {
        var uluru = {lat: <?php echo $latitude; ?>, lng: <?php echo $Longitude; ?>};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 18,
            scrollwheel: false,
            center: uluru
        });
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });
    }

Hy vọng điều này sẽ giúp ích. Chúc mừng

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Sau khi Sarah Palin tán thành Donald Trump vào đầu tuần này, gần như không thể tránh khỏi việc Tina Fey sẽ trở lại Saturday Night Live để thăm lại ấn tượng Palin cổ điển của cô. Và Fey chắc chắn đã không làm thất vọng, cô ấy đã đưa ra một lời khen ngợi không hề nhẹ về bài phát biểu chứng thực Iowa quanh co và khó hiểu của Palin trong khi Trump của Darrell Hammond đưa ra bình luận xuyên suốt.

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Brittney Griner (r.) Ngay từ đầu, thân phận của Brittney Griner đã là tình huống con tin Mỹ độc nhất trong lịch sử hiện đại.

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Chúng ta có thể thấy nhiều hơn nữa về một Julio Jones khỏe mạnh trong khu vực cuối năm nay. John Parker Wilson, Greg McElroy, A.

Đó phải là Đức

Đó phải là Đức

Đối với đội tuyển Anh, không có kẻ thủ ác nào lớn hơn Hầu hết các cổ động viên Anh, nếu không muốn nói là tất cả, hẳn sẽ phải gật gù khi tiếng còi mãn cuộc của trận bán kết lượt về W Euro 2022 vang lên. Bởi vì nó báo hiệu rằng Đức sẽ chờ đợi ở Wembley trong trận chung kết với Anh và là điều duy nhất giữa Anh và chiếc cúp lớn đầu tiên của đội tuyển nữ.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language