Wyłącz przewijanie zoom w google maps iframe

Więc widocznie kiedy używam:Wyłącz przewijanie zoom w google maps iframe

<iframe style="pointer-events:none;" src="SOME GOOGLE MAPS LINK" width="100%" height="500" frameborder="0" ></iframe>

panoramowanie zostaje wyłączona, jak również.

i kiedy używać:

<iframe style="scrollwheel: false" src="SOME GOOGLE MAPS LINK" width="100%" height="500" frameborder="0" ></iframe>

po prostu deosn't pracy.

Czy mimo to wystarczy wyłączyć powiększenie przewijania w elemencie iframe?

Źródło

2015-03-19 Milad

Właśnie zauważyłem, że google stałe zachowanie przewijania - Teraz widok mapy jest stała i tekst jest wyświetlany z niego, mówiąc: „trzeba użyć cmd + aby powiększyć :-) wspaniała wiadomość dla mnie! – tschagger

Nie można wyłączyć przewijania tylko w interfejsie API iframe w Mapach Google, ale istnieje możliwość obejścia.

Jak już zauważyłeś, że style="pointer-events:none;" uniemożliwia elementowi iframe otrzymywanie jakiegokolwiek zdarzenia myszy oraz połączenie funkcji obsługi zdarzeń JavaScript w nakładce, możesz wyłączyć i włączyć odbieranie zdarzenia myszy w wybranym momencie.

Można nawet słuchać mousemove() i tylko zwolnić zdarzenia wskaźnika gdy mysz są na pewnych obszarach (powiedzmy, guziki)

Zrobiłem quick demo na github, nadzieję, że to pomoże.

Źródło

2015-03-19 16:51:19 kaho

Świetne demo! http://kylelam.github.io/iframe.html –

Działa idealnie. – Bipon

Jeśli musisz obsługiwać dowolną wersję IE przed 11, każde rozwiązanie bazujące na atrybucie wskaźnik-zdarzenia nie będzie działać. – Edward

To dobry blogu z tym, jak to osiągnąć z onClick="style.pointerEvents='none'"Disable the mouse scroll wheel zoom on embedded Google Map iframes

Źródło

2016-10-20 22:15:49

Proszę podać pełny kod w swoich odpowiedziach. Łącza do artykułów dla pozostałej części odpowiedzi mogą wygasnąć w czasie –

Jeśli potrzebujesz obsługi dowolnej wersji IE przed 11, każde rozwiązanie bazujące na atrybucie wskaźnik-zdarzenia nie będzie działać. – Edward

Dla kogoś, że zastanawiasz się, jak wyłączyć API Javascript Google Map

przyjęte od @kaho idei

var map; 
 
var element = document.getElementById('map-canvas'); 
 
function initMaps() { 
 
    map = new google.maps.Map(element , { 
 
    zoom: 17, 
 
    scrollwheel: false, 
 
    center: { 
 
     lat: parseFloat(-33.915916), 
 
     lng: parseFloat(151.147159) 
 
    }, 
 
    }); 
 
} 
 

 

 
//START IMPORTANT part 
 
//disable scrolling on a map (smoother UX) 
 
jQuery('.map-container').on("mouseleave", function(){ 
 
    map.setOptions({ scrollwheel: false }); 
 
}); 
 
jQuery('.map-container').on("mousedown", function() { 
 
    map.setOptions({ scrollwheel: true }); 
 
}); 
 
//END IMPORTANT part

.big-placeholder { 
 
    background-color: #1da261; 
 
    height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <body> 
 
     <div class="big-placeholder"> 
 
     </div> 
 
     
 
     
 
     <!-- START IMPORTANT part --> 
 
     <div class="map-container"> 
 
     <div id="map-canvas" style="min-height: 400px;"></div> 
 
     </div> 
 
     <!-- END IMPORTANT part--> 
 
     
 
     
 
     
 
     <div class="big-placeholder"> 
 
     </div> 
 
     <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps"> 
 
     </script> 
 
    </body> 
 
</html>

Źródło

2017-05-10 05:35:43 AlbertSamuel

Oto przykład

<script> 
    function initMap() 
{ 
    var map = new google.maps.Map(document.getElementById('map'),  
    {center: {lat: -34.397, lng: 150.644},  
    scrollwheel: false,  
    zoom: 8 
    }); 
    } 

</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" 
async defer>  
</script>

Źródło: - https://developers.google.com/maps/documentation/javascript/?csw=1#GMap2.Methods

Źródło

2017-08-11 09:48:23 Pradeep

Wyłącz przewijanie zoom w google maps iframe

Odpowiedz

Powiązane problemy