Wyłącz powiększanie kółka myszy w osadzonych Mapach Google

198

Pracuję nad witryną WordPress, w której autorzy zwykle osadzają Mapy Google, używając iFrames w większości postów.

Czy istnieje sposób na wyłączenie powiększenia za pomocą kółka myszy na wszystkich przy użyciu Javascript?

google-maps scrollwheel holiveira
źródło

32

Ustaw opcję mapy scrollwheelna false.

Anto Jurković

lub wyłącz to bezpośrednio przez JS: map.disableScrollWheelZoom ();

Th3Alchemist

4

Obawiam się, że nie możesz. Ze względu na ograniczenia bezpieczeństwa nie ma dostępu do skryptu do mapy, a AFAIK nie ma dostępnego parametru adresu URL, który daje opcję wyłączenia.

Dr.Molle

Mają dokładnie ten sam problem. Chcesz wyłączyć zdarzenia przewijania myszą w osadzonej mapie iframe. Jeszcze go nie znalazłem.

Grzegorz

7

To są osadzone mapy, nie wiadomo, dlaczego ludzie publikują rozwiązania dotyczące korzystania z biblioteki JS map

zanderwar

255

Miałem ten sam problem: podczas przewijania strony wskaźnik przesuwa się nad mapą, zaczyna powiększać / pomniejszać mapę zamiast kontynuować przewijanie strony. :(

Więc rozwiązałem to wstawianie divz .overlaydokładnie przed każdym iframewstawieniem gmap , patrz:

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

W moim CSS utworzyłem klasę:

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

Div pokryje mapę, zapobiegając dostaniu się do niej zdarzeń wskaźnika. Ale jeśli klikniesz div, staje się przezroczysty dla zdarzeń wskaźnika, ponownie aktywując mapę!

Mam nadzieję, że ci pomogę :)

Massa
źródło

9

To świetne rozwiązanie. W moim przypadku musiałem jednak określić z-index, aby poprawnie się nakładało.

RCNeil

1

IMO najlepsze jak dotąd rozwiązanie tego problemu! Od dawna mamy do czynienia z tym problemem, co sprawia, że jest to przyjemna i czysta poprawka do wielokrotnego użytku!

Diego Paladino,

11

należy to zaznaczyć jako odpowiedź, chociaż prawdopodobnie łatwiej jest ustawić nakładkę jako absolutnie umieszczoną w kontenerze nadrzędnym, a następnie tylko szerokość 100% wysokość 100%, również nie wymaga właściwości tła.

ładowanie

3

Stworzyłem bardzo prostą wtyczkę jQuery, aby to zautomatyzować. Sprawdź to na github.com/diazemiliano/mapScrollOff

Emiliano Díaz

8

Czy istnieje prosty sposób rozszerzenia tego rozwiązania, aby zdarzenia kółka przewijania były ignorowane, a kliknięcia lewym przyciskiem myszy nie były ignorowane? To rozwiązanie jest dobre, ale wymaga od użytkowników dwukrotnego kliknięcia hiperłącza „Kierunki” u góry mapy (raz, aby przeniknąć do div, a następnie ponownie do samego hiperłącza.)

jptsetme

136

Wypróbowałem pierwszą odpowiedź w tej dyskusji i nie działało to dla mnie bez względu na to, co zrobiłem, więc wpadłem na własne rozwiązanie:

Zawiń iframe klasą (.maps w tym przykładzie) i najlepiej osadzaj kod: http://embedresponsively.com/ - Zmień CSS iframe na, pointer-events: nonea następnie używając funkcji kliknięcia jQuery na element nadrzędny, możesz zmienić css iframes dopointer-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"); 
});

Jestem pewien, że jest to jedyny sposób na JavaScript, jeśli ktoś chce dodać do tego coś nowego.

Sposób JavaScript na reaktywację zdarzeń wskaźnika jest dość prosty. Wystarczy podać identyfikator w ramce iFrame (tj. „Iframe”), a następnie zastosować zdarzenie onclick do elementu div Coainainer:

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
źródło

4

Dzięki za rozwiązanie „bez API”. +1

Surowe tortury

21

Możesz także dodać tę opcję, aby przywrócić ją do pierwotnego stanu, gdy mysz opuszcza: $ ('. Mapy'). Mouseleave (function () {$ ('. Map iframe'). Css ("pointer-events", " Żaden"); });

Luis

5

Tylko uwaga: użycie pointer-events: nonezapobiegnie wszelkim interakcjom z mapą (przeciąganie, nawigacja, kliknięcia itp.).

LuBre,

@LuBre tak, to zrozumiałe, dlatego istnieje funkcja kliknięcia jQuery, aby zmienić ją na auto.

nathanielperales,

1

Świetna odpowiedź! Chcesz się upewnić, że włączasz właściwą mapę, a nie wszystkie na stronie$(this).find('iframe').css("pointer-events", "auto");

Tom Prats

54

Rozszerzyłem rozwiązanie @nathanielperales.

Poniżej opisu zachowania:

kliknij mapę, aby włączyć przewijanie
kiedy mysz opuści mapę, wyłącz przewijanie

Poniżej kodu 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);

A oto przykład jsFiddle .

czerasz
źródło

1

Dziękuję za to wycięte. W końcu użyłem go z następującym dodatkiem:$('.maps.embed-container').find('iframe').css("pointer-events", "none");

lhermann

Dzięki za kod. Naprawdę rozwiązałem inny problem, który miałem. Włączyłem niektóre wykresy z Arkusza kalkulacyjnego Google i przewijanie kółkiem myszy przestało działać dla całej strony z jakiegoś powodu. Twój kod spowodował, że przewinął się ponownie za pomocą kółka myszy. Dzięki jeszcze raz.

Scott M. Stolz

31

Ponownie edytuję kod napisany przez #nathanielperales, który naprawdę dla mnie zadziałał. Prosty i łatwy do złapania, ale działa tylko raz. Więc dodałem mouseleave () w JavaScript. Pomysł zaadaptowany z #Bogdan A teraz jest idealny. Spróbuj tego. Kredyty trafiają do #nathanielperales i #Bogdan. Właśnie połączyłem oba pomysły. Dzięki chłopaki. Mam nadzieję, że pomoże to również innym ...

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

Improvise - Adapt - Overcome

A oto przykład jsFiddle.

CHaM
źródło

1

Najczystsze rozwiązanie. Miły! Ale WSZYSTKIE rozwiązania mają problem: użytkownicy muszą dwukrotnie kliknąć mapę. Jak przejść przez kliknięcie natychmiast, aby wystarczyło tylko jedno kliknięcie?

Loren,

1

Może mógłbyś uniknąć kliknięcia, przełączając na opcję pointer-events: autodopiero po „najechaniu” myszką na mapę przez określony czas? tzn. uruchom licznik czasu, gdy mysz wejdzie w ramkę iframe, i zresetuj go, gdy mysz wyjdzie. Jeśli czasomierz osiągnie X milisekund, przełącz na pointer-events: auto. I za każdym razem, gdy mysz opuszcza element iframe, po prostu przełączasz się z powrotem pointer-events: none.

stucampbell

Wolę używać dblclick zamiast klikania, w każdym razie dobre rozwiązanie.

Moxet Khan

25

Tak, to całkiem proste. Napotkałem podobny problem. Po prostu dodaj właściwość css „pointer-events” do div iframe i ustaw na „none” .

Przykład: <iframe style = "pointer-events: none" src = ........>

SideNote: Ta poprawka wyłączałaby wszystkie inne zdarzenia myszy na mapie. To działało dla mnie, ponieważ nie wymagaliśmy żadnej interakcji użytkownika na mapie.

Hassam Raja
źródło

20

Dlaczego więc nie użyć obrazu? ładujesz wiele dodatkowych zasobów, aby to wszystko wyłączyć.

deweydb

2

Tak, ale nie mogę kliknąć widżetów

Jeffrey Nicholson Carré

1

należy pamiętać, że to nie zadziała w IE <11 - caniuse.com/#search=pointer-events

totallyNotLizards

@deweydb - czy to nie jest nielegalne?

Matt Saunders

@MattSaunders nie jest pewien, czy tak było w tamtym czasie, ale teraz tak jest. Możesz załadować obraz mapy statycznej bezpośrednio z Google API, być może to właśnie sugerowało deweydb? Z pewnością byłoby to realne rozwiązanie problemu.

azariah

19

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

borchvm
źródło

13

Po przeprowadzeniu badań masz 2 opcje. Ponieważ nowe mapy interfejsu API z osadzonym elementem iframe nie obsługują wyłączania kółka myszy.

Najpierw użyłbym starych map Google ( https://support.google.com/maps/answer/3045828?hl=pl ).

Drugim byłoby utworzenie funkcji javascript w celu uproszczenia osadzania mapy dla każdego komentarza i użycia parametrów (to przykładowy kod tylko do wskazania lokalizacji, aby nie pokazać dokładnego rozwiązania)

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
źródło

8

Istnieje niesamowite i łatwe rozwiązanie.

Musisz dodać niestandardową klasę w swoim css, która ustawia zdarzenia wskaźnika do mapowania obszaru roboczego na none:

.scrolloff{
   pointer-events: none;
}

Następnie za pomocą jQuery możesz dodawać i usuwać tę klasę na podstawie różnych zdarzeń, na przykład:

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

Stworzyłem przykład w jsfiddle , mam nadzieję, że to pomaga!

Bogdan
źródło

1

Działa to również z interfejsem API Google Maps Embed - wystarczy zastąpić map_canvas osadzonym elementem iframe. Zauważ, że zdarzenie click jest na elemencie zewnętrznym , ale scrolloff na elemencie wewnętrznym (jest poprawne w odpowiedzi / jsfiddle, na wypadek, gdybyś dokonał transkrypcji zamiast kopiować / wklejać)

Jxtps

8

Po prostu rejestruję jedno konto na developers.google.com i otrzymuję token do wywołania interfejsu API Map Google, i po prostu je wyłączam (kółko przewijania: fałsz):

    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
źródło

O wiele lepsze niż hacki jQuery!

Dániel Kis-Nagy

7

To jest moje podejście. Łatwo go wdrażać na różnych stronach internetowych i cały czas z niego korzystać

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

W HTML będziesz chciał zawinąć iframe w 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>

Rozwiń fragment kodu

Mam nadzieję, że pomoże to każdemu, kto szuka prostego rozwiązania.

użytkownik1588572
źródło

5

Oto proste rozwiązanie. Wystarczy ustawić pointer-events: noneCSS na, <iframe>aby wyłączyć przewijanie myszy.

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

Jeśli chcesz, aby przewijanie myszy było aktywowane, gdy użytkownik kliknie mapę, użyj następującego kodu JS. Spowoduje to również wyłączenie przewijania myszy, gdy mysz wyjdzie z mapy.

$(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
źródło

!!! Należy również pamiętać, że zdarzenia wskaźnika Imho wyłączają wszystkie zdarzenia kliknięcia dla tego elementu iframe.

stephanfriedrich

Zdarzenia kliknięcia są wyłączone tylko dla elementu iframe. Ale jeśli używasz kodu JS, gdy tylko mysz wejdzie do uchwytu div.gmap, zdarzenia kliknięcia zostaną ponownie aktywowane.

manish_s,

To zadziałało dla mnie znakomicie! Większość rozwiązań była niezgodna z WordPress: onclick jest szorowany, a czasami szerokość iframe nie jest honorowana, ale działało to jak urok. Po odłożeniu kodu JS wystarczy tylko odwołać się do id = "gmap-holder". Idealny. Dzięki Manish.

usonianhorizon

4

Aby wyłączyć powiększanie kółka przewijania myszy w osadzonych Mapach Google, wystarczy ustawić właściwość wskaźnik-zdarzenia-css dla elementu iframe na none:

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

To wszystko .. Całkiem nieźle, co?

<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
źródło

2

Wyłącza

Wyłącza także powiększanie, pomniejszanie, kierunki itp.

Zanderwar 27.10.16

4

Cóż, dla mnie najlepszym rozwiązaniem było po prostu użycie takiego:

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>

WYNIK

Uwagi:

Najlepiej byłoby dodać nakładkę z ciemniejszą przezroczystością z tekstem: „ Kliknij, aby przeglądać ”, gdy kółko myszy jest dezaktywowane. Ale gdy jest ono aktywowane (po kliknięciu), przezroczystość z tekstem zniknie, a użytkownik będzie mógł przeglądać mapa zgodnie z oczekiwaniami. Wszelkie wskazówki, jak to zrobić?

Qatan
źródło

3

Dodaj styl, który pointer-events:none;działa dobrze

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

Mohan
źródło

3

Najprostszym sposobem na to jest użycie pseudoelementu, takiego jak :beforelub :after.
Ta metoda nie wymaga żadnych dodatkowych elementów HTML ani jquery.
Jeśli mamy na przykład tę strukturę HTML:

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

Następnie wszystko, co musimy zrobić, to zrobić opakowanie względem pseudoelementu, który utworzymy, aby zapobiec przewijaniu

.map_wraper{
    position:relative;
}

Następnie stworzymy pseudoelement, który zostanie umieszczony nad mapą, aby zapobiec przewijaniu:

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

I gotowe, bez jquery bez dodatkowych elementów HTML! Oto działający przykład jsfiddle: http://jsfiddle.net/e6j4Lbe1/

Andrei
źródło

Sprytny pomysł. Jednak, podobnie jak niektóre inne odpowiedzi, rejestruje wszystko, nie tylko zdarzenia kółka myszy.

likeitlikeit

Cieszę się, że to ci pomogło!

Andrei

3

Oto moje proste rozwiązanie.

Umieść iframe w div z klasą zwaną na przykład „mapami”.

To będzie CSS twojego iframe

.maps iframe { pointer-events: none }

A oto mały skrypt javascript, który ustawi właściwość wskaźnika-zdarzenia iframe na „auto”, gdy najedziesz na element div przez co najmniej 1 sekundę (działa najlepiej dla mnie - ustaw go na cokolwiek chcesz) i wyczyści limit czasu / ustaw ponownie na „none”, gdy mysz opuści element.

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

Twoje zdrowie.

iXzellent
źródło

3

Stworzyłem bardzo prostą wtyczkę jQuery, aby rozwiązać problem. Sprawdź to na 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>

Rozwiń fragment kodu

Emiliano Díaz
źródło

2

Korzystając z odpowiedzi @ natanielperales, dodałem funkcję aktywowania, ponieważ dla mnie działa ona lepiej, gdy użytkownik traci koncentrację na mapie, aby zatrzymać przewijanie :)

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

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

Maciek Kwapiński
źródło

Chodzi o to, że tracimy funkcję nawigacji, dla mnie jest to bardzo ważne w urządzeniach mobilnych. Stworzyłem bardzo prostą wtyczkę jQuery, którą możesz modyfikować, jeśli chcesz. Sprawdź to na github.com/diazemiliano/mapScrollOff

Emiliano Díaz

2

Wariacje na temat: proste rozwiązanie z jQuery, nie wymaga edycji 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
});

Detektor najechania jest dołączony do elementu nadrzędnego, więc jeśli bieżący element nadrzędny jest większy, możesz po prostu owinąć element iframe div przed trzecim wierszem.

Mam nadzieję, że przyda się komuś.

bencergazda
źródło

1

Natknąłem się na tej kwestii siebie i używane niektóre mashup dwóch bardzo przydatnych odpowiedzi na to pytanie: czerasz 's odpowiedź i Massa jest odpowiedź.

Oba mają dużo prawdy, ale gdzieś w moich testach dowiedziałem się, że jeden nie działa na urządzeniach mobilnych i ma słabą obsługę IE (działa tylko na IE11). Jest to rozwiązanie autorstwa nathanielperales, a następnie rozszerzone przez czerasz, który opiera się na css pointer-events i który nie działa na urządzeniach mobilnych (nie ma wskaźnika na urządzeniach mobilnych) i nie działa na żadnej wersji IE, która nie jest w wersji 11 . Zwykle nie przejmowałbym się tym mniej, ale jest tam mnóstwo użytkowników i chcemy spójnej funkcjonalności, więc wybrałem rozwiązanie nakładki, używając opakowania, aby ułatwić kodowanie.

Mój znacznik wygląda następująco:

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

Następnie style są takie:

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

Na koniec skrypt:

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

Dodałem również moje przetestowane rozwiązanie do listy GitHub , jeśli chcesz dostać stamtąd ...

EffectiX
źródło

1

Jest to rozwiązanie z CSS i Javascript (tj. Jquery, ale działa również z czystym Javascript). Jednocześnie mapa reaguje. Unikaj powiększania mapy podczas przewijania, ale mapę można aktywować, klikając ją.

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

Baw się dobrze !

Drelich
źródło

1

W Google Maps v3 możesz teraz wyłączyć przewijanie, aby powiększyć, co prowadzi do znacznie lepszej wygody użytkownika. Inne funkcje mapy będą nadal działać i nie potrzebujesz dodatkowych div. Pomyślałem również, że użytkownik powinien otrzymać informację zwrotną, aby mógł zobaczyć, kiedy przewijanie jest włączone, dlatego dodałem obramowanie mapy.

// 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
źródło

1

To da Ci responsywną mapę Google, która zatrzyma przewijanie ramki iframe, ale po kliknięciu pozwoli ci powiększyć.

Skopiuj i wklej to do swojego HTML, ale zastąp link iframe swoim własnym. Jest to artykuł na ten temat z przykładem: Wyłącz powiększanie kółka myszy w osadzonych elementach iframe Google Maps

<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
źródło

0

Oto moje podejście do tego.

Wrzuć to do mojego pliku main.js lub podobnego:

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

Następnie po prostu wstaw pusty div, w którym chcesz, aby mapa pojawiła się na twojej stronie.

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

Oczywiście musisz również zadzwonić w interfejsie API Map Google. Po prostu utworzyłem plik o nazwie mapi.js i wrzuciłem go do mojego folderu / js. Ten plik musi zostać wywołany przed powyższym javascript.

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

Po wywołaniu pliku mapi.js pamiętaj, aby przekazać mu atrybut false czujnika.

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

Nowa wersja 3 interfejsu API z jakiegoś powodu wymaga włączenia czujnika. Upewnij się, że dołączasz plik mapi.js przed plikiem main.js.

Chad Warren
źródło

0

W przypadku Google Maps v2 - GMap2:

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

użytkownik956584
źródło

0

jeśli masz element iframe korzystający z wbudowanego interfejsu API mapy Google w następujący sposób:

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

możesz dodać ten styl css: 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
źródło

0

Oto moje zdanie na temat odpowiedzi @nathanielperales rozszerzonej o @chams, teraz przeze mnie ponownie.

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
źródło

0

Najprostszy :

<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
źródło

0

Dodaj to do skryptu:

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
źródło

2

Pytanie dotyczy interfejsu API osadzania (przy użyciu elementu iframe), a nie interfejsu API JavaScript.

GreatBlakes,

0

Oto moje rozwiązanie problemu, budowałem stronę WP, więc jest tu trochę kodu php. Ale klucz znajduje się scrollwheel: false,w obiekcie mapy.

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

Mam nadzieję, że to pomoże. Twoje zdrowie

Djordje Arsenovic
źródło

Wyłącz powiększanie kółka myszy w osadzonych Mapach Google

Odpowiedzi: