Nonaktifkan zoom roda gulir mouse pada Google Maps yang disematkan

198

Saya sedang mengerjakan situs WordPress tempat penulis biasanya menyematkan Google Maps menggunakan iFrames di sebagian besar posting.

Apakah ada cara untuk menonaktifkan zoom melalui roda gulir mouse pada mereka semua menggunakan Javascript?

google-maps scrollwheel holiveira
sumber

32

Setel opsi peta scrollwheelke false.

Anto Jurković

atau nonaktifkan langsung melalui JS: map.disableScrollWheelZoom ();

Th3 Alkemis

4

Aku khawatir kamu tidak bisa. Karena pembatasan keamanan, tidak ada akses scripting ke peta, dan AFAIK tidak ada parameter URL yang tersedia yang memberi Anda opsi untuk menonaktifkannya.

Dr.Molle

Memiliki masalah yang persis sama. Ingin menonaktifkan acara gulir mouse di embed dengan peta iframe. Belum menemukannya.

Grzegorz

7

Ini adalah peta yang disematkan, tidak yakin mengapa orang memposting solusi untuk menggunakan peta JS library

zanderwar

255

Saya mengalami masalah yang sama: ketika menggulir halaman kemudian penunjuk menjadi di atas peta, mulai memperbesar / memperkecil peta alih-alih melanjutkan menggulir halaman. :(

Jadi saya memecahkan masalah menempatkan ini divdengan .overlaytepat sebelum setiap iframepenyisipan gmap , lihat:

<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>

Di CSS saya, saya membuat kelas:

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

Div akan mencakup peta, mencegah peristiwa penunjuk untuk sampai ke sana. Tetapi jika Anda mengklik div, itu menjadi transparan untuk mengarahkan peristiwa, mengaktifkan kembali peta!

Saya harap bisa membantu Anda :)

Massa
sumber

9

Ini solusi hebat. Dalam kasus saya, saya harus menentukan z-indexagar overlay dengan benar.

RCNeil

1

IMO solusi terbaik untuk masalah ini! Kami telah menghadapi masalah ini sejak lama dan ini membuat perbaikan yang bagus dan cukup bersih dapat digunakan kembali!

Diego Paladino

11

ini harus ditandai sebagai jawabannya, walaupun mungkin lebih mudah untuk mengatur overlay sebagai benar-benar diposisikan ke wadah induk dan kemudian hanya lebar 100% tinggi 100%, juga tidak memerlukan properti latar belakang.

bayar biaya

3

Saya telah membuat plugin jQuery yang sangat sederhana untuk mengotomatisasi ini. Lihat di github.com/diazemiliano/mapScrollOff

Emiliano Díaz

8

Apakah ada cara langsung untuk memperluas solusi ini sehingga acara roda gulir diabaikan, tetapi klik kiri tidak diabaikan? Solusi ini bagus, tetapi mengharuskan pengguna mengklik dua kali pada tautan "Arah" di bagian atas peta (satu kali untuk menembus div dan kemudian lagi mengklik tautan itu sendiri.)

jptsetme

136

Saya mencoba jawaban pertama dalam diskusi ini dan itu tidak berhasil bagi saya tidak peduli apa yang saya lakukan jadi saya datang dengan solusi saya sendiri:

Bungkus iframe dengan kelas (.maps dalam contoh ini) dan idealnya kode responsif: http://embedresponsively.com/ - Ubah CSS iframe ke pointer-events: nonekemudian gunakan fungsi klik jQuery ke elemen induk Anda dapat mengubah iframes css untukpointer-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"); 
});

Saya yakin hanya ada cara JavaScript untuk melakukan ini, jika seseorang ingin menambahkan ini, jangan ragu.

Cara JavaScript untuk mengaktifkan kembali pointer-events cukup sederhana. Berikan saja Id ke iFrame (yaitu "iframe"), lalu terapkan acara onclick ke 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>

nathanielperales
sumber

4

Terima kasih untuk solusi "tanpa API". +1

Siksaan Parah

21

Anda juga dapat menambahkan ini untuk membawanya kembali ke keadaan semula ketika mouse meninggalkan: $ ('. Maps'). Mouseleave (function () {$ ('. Maps iframe'). Css ("pointer-events", " tidak ada ");});

Luis

5

Hanya sebuah catatan: menggunakan pointer-events: noneakan mencegah interaksi dengan peta (seret, navigasi, klik, dll).

LuBre

@ David Ya, itu dimengerti, itu sebabnya ada fungsi klik jQuery untuk mengubahnya menjadi otomatis.

nathanielperales

1

Jawaban bagus! Anda ingin memastikan Anda mengaktifkan peta yang benar dan tidak semua pada halaman$(this).find('iframe').css("pointer-events", "auto");

Tom Prats

54

Saya memperluas solusi @nathanielperales.

Di bawah deskripsi perilaku:

klik peta untuk mengaktifkan gulir
saat mouse meninggalkan peta, nonaktifkan gulir

Di bawah kode 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);

Dan ini adalah contoh jsFiddle .

Czerasz
sumber

1

Terima kasih untuk ini. Saya menggunakannya dengan tambahan berikut pada akhirnya:$('.maps.embed-container').find('iframe').css("pointer-events", "none");

lhermann

Terima kasih untuk kodenya. Ini benar-benar memecahkan masalah berbeda yang saya miliki. Saya menyematkan beberapa bagan dari Google Spreadsheet dan menggulir dengan roda mouse berhenti berfungsi untuk seluruh halaman karena suatu alasan. Kode Anda membuatnya gulir lagi dengan roda mouse. Terima kasih lagi.

Scott M. Stolz

31

Saya mengedit ulang kode yang ditulis oleh #nathanielperales itu benar-benar bekerja untuk saya. Sederhana dan mudah ditangkap tetapi kerjanya hanya sekali. Jadi saya menambahkan mouseleave () di JavaScript. Ide diadaptasi dari #Bogdan Dan sekarang ini sempurna. Coba ini. Kredit diberikan ke #nathanielperales dan #Bogdan. Saya baru saja menggabungkan kedua ide itu. Terima kasih kawan. Saya harap ini akan membantu orang lain juga ...

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

Berimprovisasi - Beradaptasi - Mengatasi

Dan ini adalah contoh jsFiddle.

cHaMs
sumber

1

Solusi terbersih. Bagus! Tetapi SEMUA solusi memiliki masalah: Pengguna harus mengklik peta dua kali. Bagaimana bisa melewati klik dengan segera, sehingga hanya membutuhkan satu klik?

Loren

1

Mungkin Anda bisa menghindari klik dengan beralih pointer-events: autohanya setelah mouse "melayang" di atas peta untuk jangka waktu tertentu? yaitu mulai timer ketika mouse memasuki iframe dan reset ketika mouse pergi. Jika timer mencapai X milidetik, alihkan ke pointer-events: auto. Dan setiap kali mouse meninggalkan iframe Anda hanya beralih kembali ke pointer-events: none.

stucampbell

Saya lebih suka menggunakan dblclick daripada klik, toh solusi yang bagus.

Moxet Khan

25

Ya itu cukup mudah. Saya menghadapi masalah yang sama. Cukup tambahkan properti css "pointer-events" ke iframe div dan set ke 'none' .

Contoh: <iframe style = "pointer-events: none" src = ........>

SideNote: Perbaikan ini akan menonaktifkan semua acara mouse lainnya di peta. Ini bekerja untuk saya karena kami tidak memerlukan interaksi pengguna di peta.

Hassam Raja
sumber

20

Mengapa tidak menggunakan gambar saja? Anda sedang memuat banyak aset tambahan hanya untuk menonaktifkan semuanya.

deweydb

2

Ya tapi saya tidak bisa mengklik widget

Jeffrey Nicholson Carré

1

Harap dicatat bahwa ini tidak akan bekerja pada IE <11 - caniuse.com/#search=pointer-events

totallyNotLizards

@deweydb - bukankah itu ilegal?

Matt Saunders

@MattSaunders tidak yakin apakah ini yang terjadi pada saat itu, tetapi sekarang. Anda dapat memuat gambar peta statis langsung dari Google API, mungkin ini yang disarankan deweydb? Tentu akan menjadi cara yang layak untuk mengatasi masalah tersebut.

azariah

19

var mapOptions = {
   scrollwheel: false,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

borchvm
sumber

13

Setelah melakukan riset, Anda memiliki 2 opsi. Karena api peta baru dengan embr iframe tampaknya tidak mendukung penonaktifan roda mouse.

Pertama akan menggunakan peta google lama ( https://support.google.com/maps/answer/3045828?hl=id ).

Kedua adalah membuat fungsi javascript untuk menyederhanakan penyematan peta untuk setiap komentar dan menggunakan parameter (itu kode sampel hanya untuk menunjukkan lokasi tidak menunjukkan solusi yang tepat)

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 */
}

Grzegorz
sumber

8

Ada solusi yang luar biasa dan mudah.

Anda perlu menambahkan kelas khusus di css Anda yang mengatur acara pointer ke kanvas peta ke none:

.scrolloff{
   pointer-events: none;
}

Kemudian, dengan jQuery, Anda dapat menambah dan menghapus kelas itu berdasarkan berbagai peristiwa, misalnya:

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

Saya telah membuat contoh di jsfiddle , semoga bisa membantu!

Bogdan
sumber

1

Ini juga berfungsi dengan Google Maps Embed API - cukup ganti map_canvas dengan iframe embed. Perhatikan bahwa acara klik ada di elemen luar , tetapi scrolloff ada di elemen bagian dalam (itu benar dalam jawaban / jsfiddle, kalau-kalau Anda menyalin daripada menyalin / menempel)

Jxtps

8

Saya hanya mendaftarkan satu akun di developers.google.com dan mendapatkan token untuk panggilan Maps API, dan cukup nonaktifkan yang seperti ini (scrollwheel: 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
        });
    }

RSiqueira
sumber

Jauh lebih baik dari peretasan jQuery!

Dániel Kis-Nagy

7

Ini pendekatan saya. Saya merasa mudah menerapkannya di berbagai situs web dan menggunakannya setiap saat

CSS dan 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>

Dalam HTML, Anda ingin membungkus iframe dalam 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>

Luaskan cuplikan

Semoga ini bisa membantu orang mencari solusi sederhana.

pengguna1588572
sumber

5

Ini solusi sederhana. Cukup setel pointer-events: noneCSS ke <iframe>untuk menonaktifkan gulir mouse.

<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>

Jika Anda ingin gulir mouse diaktifkan ketika pengguna mengklik peta, maka gunakan kode JS berikut. Ini juga akan menonaktifkan gulir mouse lagi, ketika mouse bergerak keluar dari peta.

$(function() {
    $('#gmap-holder').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'all');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
})

manish_s
sumber

!!! Juga Perhatikan, Imho pointer-events menonaktifkan semua klik Event untuk Iframe ini.

stephanfriedrich

Acara klik hanya dinonaktifkan untuk iframe. Tetapi jika Anda menggunakan kode JS, segera setelah mouse memasuki div.gmap-holder, peristiwa klik akan diaktifkan kembali.

manish_s

Ini bekerja dengan baik untuk saya! Sebagian besar solusi tidak kompatibel dengan WordPress: onclick dihapus, dan kadang-kadang lebar iframe tidak dihormati, tetapi ini bekerja seperti pesona. Setelah meletakkan kode JS, yang perlu dilakukan hanyalah merujuk pada id = "gmap-holder". Sempurna. Manish terima kasih.

usonianhorizon

4

Untuk menonaktifkan zoom roda gulir mouse pada Google Maps yang disematkan, Anda hanya perlu mengatur event pointer-properti css dari iframe ke none:

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

Thats All .. Cukup rapi ya?

<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>

NadirShah Rahat
sumber

2

Ini juga akan menonaktifkan zoom klik dua kali :)

w3debugger

Juga menonaktifkan zoom-in, zoom-out, arah dll

zanderwar

4

Nah, bagi saya solusi terbaik adalah dengan menggunakan seperti ini:

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>

HASIL

Pertimbangan:

Yang terbaik adalah menambahkan hamparan dengan transparansi yang lebih gelap dengan teks: " Klik untuk meramban " ketika roda mouse dinonaktifkan Tetapi ketika diaktifkan (setelah Anda mengkliknya) maka transparansi dengan teks akan hilang dan pengguna dapat menelusuri peta seperti yang diharapkan. Adakah petunjuk bagaimana melakukannya?

Qatan
sumber

3

Tambahkan gaya pointer-events:none;ini berfungsi dengan baik

<iframe style="pointer-events:none;" src=""></iframe>

Mohan
sumber

3

Cara paling sederhana untuk melakukannya adalah dengan menggunakan elemen pseudo seperti :beforeatau :after.
Metode ini tidak memerlukan elemen html atau jquery tambahan.
Jika kita memiliki misalnya struktur html ini:

<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>

Maka yang perlu kita lakukan hanyalah membuat wrapper relatif terhadap elemen semu yang akan kita buat untuk mencegah pengguliran

.map_wraper{
    position:relative;
}

Setelah ini kita akan membuat elemen pseudo yang akan diposisikan di atas peta untuk mencegah pengguliran:

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

Dan Anda selesai, tidak ada jquery, tidak ada elemen html tambahan! Ini adalah contoh jsfiddle yang berfungsi: http://jsfiddle.net/e6j4Lbe1/

Andrei
sumber

Ide pintar Namun, seperti beberapa jawaban lainnya, ini menangkap semuanya, bukan hanya peristiwa roda mouse.

likeitlikeit

Saya senang itu membantu Anda!

Andrei

3

Ini solusi sederhana saya.

Masukkan iframe Anda dalam div dengan kelas yang disebut "peta" misalnya.

Ini akan menjadi CSS untuk iframe Anda

.maps iframe { pointer-events: none }

Dan di sini ada sedikit javascript yang akan mengatur properti pointer-events dari iframe menjadi "auto" ketika Anda mengarahkan elemen div setidaknya selama 1 detik (paling cocok untuk saya - atur sesuai keinginan Anda) dan hapus timeout / atur ke "none" lagi ketika mouse meninggalkan elemen.

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

Bersulang.

iXzellent
sumber

3

Saya telah membuat plugin jQuery yang sangat sederhana untuk menyelesaikan masalah. Periksa di 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>

Luaskan cuplikan

Emiliano Díaz
sumber

2

Menggunakan jawaban dari @nathanielperales saya telah menambahkan fungsi hover karena bagi saya itu berfungsi lebih baik ketika pengguna kehilangan fokus pada peta untuk berhenti menggulir lagi :)

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

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

Maciek Kwapinski
sumber

Masalahnya adalah kita kehilangan fungsi navigasi, bagi saya sangat penting dalam perangkat seluler. Saya telah membuat plugin jQuery yang sangat sederhana yang dapat Anda modifikasi jika Anda mau. Lihat di github.com/diazemiliano/mapScrollOff

Emiliano Díaz

2

Variasi pada tema: solusi sederhana dengan jQuery, tidak perlu pengeditan 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
});

Hover listener dilampirkan ke elemen induk, jadi jika induk saat ini lebih besar, Anda bisa membungkus iframe dengan div sebelum baris ke-3.

Semoga bermanfaat bagi seseorang.

bencergazda
sumber

1

Saya menemukan masalah ini sendiri dan menggunakan beberapa dari dua jawaban yang sangat berguna pada pertanyaan ini: jawaban dan massa czerasz .

Mereka berdua memiliki banyak kebenaran, tetapi di suatu tempat dalam pengujian saya, saya menemukan bahwa satu tidak berfungsi untuk seluler dan memiliki dukungan IE yang buruk (hanya berfungsi pada IE11). Ini adalah solusi oleh nathanielperales, kemudian diperpanjang oleh czerasz, yang bergantung pada pointer-events css dan itu tidak berfungsi pada ponsel (tidak ada pointer di ponsel) dan itu tidak bekerja pada versi IE mana pun yang tidak v11 . Biasanya saya tidak peduli, tetapi ada satu ton pengguna di luar sana dan kami ingin fungsionalitas yang konsisten, jadi saya menggunakan solusi overlay, menggunakan pembungkus untuk membuatnya lebih mudah untuk kode.

Jadi, markup saya terlihat seperti ini:

<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>

Maka gayanya seperti ini:

.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*/
}

Terakhir skrip:

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

Saya juga menambahkan solusi teruji saya di inti GitHub , jika Anda ingin mendapatkan barang dari sana ...

Efekif
sumber

1

Ini adalah solusi dengan CSS dan Javascript (mis. Jquery tetapi berfungsi juga dengan Javascript murni). Pada saat yang sama peta responsif. Hindari peta untuk memperbesar ketika menggulir, tetapi peta dapat diaktifkan dengan mengklik di dalamnya.

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 */
}

Selamat bersenang-senang !

Jean
sumber

1

Di Google Maps v3 Anda sekarang dapat menonaktifkan gulir untuk memperbesar, yang mengarah pada pengalaman pengguna yang jauh lebih baik. Fungsi peta lainnya masih akan berfungsi dan Anda tidak perlu div tambahan. Saya juga berpikir harus ada umpan balik bagi pengguna sehingga mereka dapat melihat ketika bergulir diaktifkan, jadi saya menambahkan perbatasan peta.

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

Gerry
sumber

1

Ini akan memberi Anda Google Map responsif yang akan menghentikan pengguliran pada iframe, tetapi sekali diklik akan membuat Anda memperbesar.

Salin dan tempel ini ke html Anda tetapi ganti tautan iframe dengan milik Anda. Dia adalah artikel di atasnya dengan contoh: Nonaktifkan zoom roda gulir mouse pada iframe Google Map yang disematkan

<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>

Jonny Jordan
sumber

0

Ini akan menjadi pendekatan saya untuk ini.

Pop ini ke main.js saya atau file serupa:

// 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');

Kemudian cukup masukkan div kosong di mana Anda ingin peta muncul di halaman Anda.

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

Anda jelas perlu menelepon di Google Maps API juga. Saya cukup membuat file bernama mapi.js dan melemparkannya ke folder / js saya. File ini perlu dipanggil sebelum javascript di atas.

`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/vt?lyrs=m@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m@228000000"],[["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/vt?lyrs=h@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"h@228000000"],[["http://mt0.googleapis.com/vt?lyrs=t@131,r@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t@131,r@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t@131,r@228000000"],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");
})();`

Ketika Anda memanggil file mapi.js pastikan Anda memberikannya atribut false sensor.

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

Versi 3 API yang baru membutuhkan penyertaan sensor karena beberapa alasan. Pastikan Anda memasukkan file mapi.js sebelum file main.js Anda.

Chad Warren
sumber

0

Untuk google maps v2 - GMap2:

ar map = new GMap2(document.getElementById("google_map"));
map.disableScrollWheelZoom();

pengguna956584
sumber

0

jika Anda memiliki iframe menggunakan Google map embedded API seperti ini:

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

Anda dapat menambahkan gaya css ini: 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>

Frank Dark
sumber

0

Inilah jawaban saya atas jawaban @nathanielperales yang diperpanjang oleh @chams, sekarang diperpanjang lagi oleh saya.

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

squarecandy
sumber

0

Yang paling sederhana :

<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>

T.Todua
sumber

0

Tambahkan ini ke skrip Anda:

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

Akriti
sumber

2

Pertanyaannya terkait dengan Embed API (menggunakan iframe), bukan JavaScript API.

GreatBlakes

0

Ini solusi saya untuk masalah ini, saya membangun situs WP, jadi ada sedikit kode php di sini. Tetapi kuncinya ada scrollwheel: false,di objek peta.

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

Semoga ini bisa membantu. Bersulang

Djordje Arsenovic
sumber

Nonaktifkan zoom roda gulir mouse pada Google Maps yang disematkan

Jawaban: