Eu sunt, folosind Google Maps API (v3) să elaboreze câteva hărți pe o pagină. Un singur lucru am'd place să fac este de a dezactiva zoom-ul atunci când derulați rotița mouse-ului pe harta, dar am'm sigur cum.
Eu am dezactivat scaleControl (de exemplu, a eliminat scalare UI element), dar acest lucru nu't preveni rotita de scroll de scalare.
Aici este o parte din rolul meu (it's un simplu plugin jQuery):
$.fn.showMap = function(options, addr){
options = $.extend({
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);
var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);
// Code cut from this example as not relevant
};
În versiunea 3 a Maps API puteți seta pur și simplu scroll
opțiune pentru fals în MapOptions proprietăți:
options = $.extend({
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);
Dacă ați fost utilizați versiunea 2 a API Maps ar fi trebuit să utiliza disableScrollWheelZoom() API, apel, după cum urmează:
map.disableScrollWheelZoom();
Anii scroll
zoom este activată în mod implicit în versiunea 3 a Maps API, dar în versiunea 2 este dezactivat, cu excepția cazului în mod explicit permis cu enableScrollWheelZoom()
apel API.
Daniel's code are loc de muncă (mersi mult!). Dar am vrut pentru a dezactiva zoom-ul complet. Am găsit am avut de a utiliza toate cele patru dintre aceste opțiuni pentru a face acest lucru:
{
zoom: 14, // Set the zoom level manually
zoomControl: false,
scaleControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
...
}
Doar în cazul în care doriți pentru a face acest lucru dinamic;
function enableScrollwheel(map) {
if(map) map.setOptions({ scrollwheel: true });
}
function disableScrollwheel(map) {
if(map) map.setOptions({ scrollwheel: false });
}
Uneori trebuie să arate ceva "complex" peste harta (sau harta este o mică parte din layout-ul), iar acest lucru scroll zoom devine în mijloc, dar odată ce ai o hartă, acest mod de zoom este frumos.
Ca de acum (octombrie 2017) Google a implementat o proprietate specifică să se ocupe de zoom/de defilare, numit gestureHandling
. Scopul său este să se ocupe de dispozitive mobile de operare, dar acesta modifică comportamentul pentru browserele desktop la fel de bine. Aici este de documentația oficială:
funcția initMap() { var locationRio = {lat: -22.915, gnl: -43.197}; var map = new google.hărți.Harta(document.getElementById('harta'), { zoom: 13, centru: locationRio, gestureHandling: 'nu' });
valorile disponibile pentru gestureHandling sunt:
'lacom'
: harta întotdeauna tigăi (în sus sau în jos, la stânga sau la dreapta), atunci când utilizatorul swipes (trage) pe ecran. Cu alte cuvinte, atât o glisare cu un deget și glisați cu două degete cauza harta la tigaie.'de cooperare'
: utilizatorul trebuie să treceți cu degetul pentru a derula pagina și două degete pentru a panorama harta. Dacă utilizatorul swipes harta cu un singur deget, o suprapunere apare pe harta, cu un prompt spune utilizatorului de a folosi două degete pentru a muta harta. Pe desktop aplicații, utilizatorii pot face zoom sau pan hartă de defilare în timp ce apăsați o tastă modificatoare (ctrl sau ⌘ cheie).'nu'
: Această opțiune dezactivează panoramare și ciupit pe harta pentru dispozitive mobile, și trăgând de harta de pe dispozitive desktop.'auto'
(implicit): în Funcție de faptul dacă pagina este derulabil, Google Maps JavaScript API stabilește gestureHandling proprietate să fie'de cooperare' " sau " 'lacom'
Pe scurt, puteți cu ușurință forța de setare pentru a "întotdeauna zoom" ('lacom'
), "n-zoom" ('nu'
), sau "utilizatorul trebuie să apăsați CTRL/⌘ pentru a activa zoom" ('de cooperare'
).
Am creat o mai dezvoltate plugin jQuery care vă permite pentru a bloca sau debloca pe hartă cu un buton frumos.
Acest plugin dezactivează Google Maps iframe cu un transparent overlay div și adaugă un buton pentru unlockit. Trebuie să apăsați pentru 650 de milisecunde pentru a-l debloca.
Puteți schimba toate opțiunile pentru confortul dumneavoastră. Verifica-l la https://github.com/diazemiliano/googlemaps-scrollprevent
Aici's un exemplu.
(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);
.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>
Doar în cazul în, utilizați GMaps.js biblioteca, care face un pic mai simplu de a face lucruri cum ar fi Geocodare și insigne personalizate, aici's cum ai rezolva această problemă folosind tehnicile învățate din răspunsurile anterioare.
var Gmap = new GMaps({
div: '#main-map', // FYI, this setting property used to be 'el'. It didn't need the '#' in older versions
lat: 51.044308,
lng: -114.0630914,
zoom: 15
});
// To access the Native Google Maps object use the .map property
if(Gmap.map) {
// Disabling mouse wheel scroll zooming
Gmap.map.setOptions({ scrollwheel: false });
}
În cazul meu, cel mai important lucru a fost de a stabili în 'scroll':fals în init. Observație: eu sunt, folosind [
UI jQuery Map`](https://code.google.com/p/jquery-ui-map/). Mai jos este mi CoffeeScript init funcție de poziția:
$("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->
Pentru cineva care vă întrebați cum de a dezactiva Javascript Google Map API
Va activare zoom scroll dacă faceți clic pe hartă o dată. Și dezactivare după ce mouse-ul a ieși din div.
Aici este un exemplu
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>
Trebuie doar să adăugați în harta opțiuni:
scrollwheel: false
O soluție simplă:
// DISABLE MOUSE SCROLL IN MAPS
// enable the pointer events only on click;
$('.gmap-wrapper').on('click', function () {
$('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click
});
// you want to disable pointer events when the mouse leave the canvas area;
$(".gmap-wrapper").mouseleave(function () {
$('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
});
.scrolloff{ pointer-events: none; }
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gmap-wrapper">
<iframe class="scrolloff" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44754.55736493158!2d9.151166379101554!3d45.486726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786bfca7e8fb1cb%3A0xee8d99c9d153be98!2sCorsidia!5e0!3m2!1sit!2sit!4v1496947992608" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</html>
In caz ca cineva este interesat de un pur css soluție pentru acest lucru. Următorul cod suprapuneri transparente div pe hartă, și se mută transparent div spatele hartă atunci când se face clic. Suprapunerea previne zoom, odata apasat, iar în spatele harta, zoom-ul este activat.
A se vedea blog-ul meu post Google maps comutare zoom cu css pentru o explicație cum funcționează, și pen codepen.io/daveybrown/pen/yVryMr pentru un demo de lucru.
Disclaimer: acest lucru este în principal pentru învățare și, probabil, a câștigat't fi cea mai bună soluție pentru site-urile de producție.
HTML:
<div class="map-wrap small-11 medium-8 small-centered columns">
<input id="map-input" type="checkbox" />
<label class="map-overlay" for="map-input" class="label" onclick=""></label>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19867.208601651986!2d-0.17101002911118332!3d51.50585742500925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482355389969"></iframe>
</div>
CSS:
.map-wrap {
position: relative;
overflow: hidden;
height: 180px;
margin-bottom: 10px;
}
#map-input {
opacity: 0;
}
.map-overlay {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
overflow: hidden;
z-index: 2;
}
#map-input[type=checkbox]:checked ~ iframe {
z-index: 3;
}
#map-input[type=checkbox]:checked ~ .map-overlay {
position: fixed;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
z-index: 1;
border: none;
}
Utilizarea bucata aia de cod, care vă va oferi toate de culoare și zoom de control de google map. (scaleControl: false și scroll: false va împiedica de la zoom cu rotița mouse-ului în sus sau în jos)
function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 23.684994, lng: 90.356331},
zoom: 8,
scaleControl: false,
scrollwheel: false,
styles: [
{elementType: 'geometry', stylers: [{color: 'F1F2EC'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '877F74'}]},
{elementType: 'labels.text.fill', stylers: [{color: '877F74'}]},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#263c3f'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#f77c2b'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: 'F5DAA6'}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{color: '#212a37'}]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{color: '#f77c2b'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#746855'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: 'F5DAA6'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: 'F5DAA6'}]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{color: '#2f3948'}]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{color: '#f77c2b3'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#0676b6'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#515c6d'}]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{color: '#17263c'}]
}
]
});
var marker = new google.maps.Marker({
position: {lat: 23.684994, lng: 90.356331},
map: map,
title: 'BANGLADESH'
});
}
Am făcut-o cu acest simplu examps
jQuery
$('.map').click(function(){
$(this).find('iframe').addClass('clicked')
}).mouseleave(function(){
$(this).find('iframe').removeClass('clicked')
});
CSS
.map {
width: 100%;
}
.map iframe {
width: 100%;
display: block;
pointer-events: none;
position: relative; /* IE needs a position other than static */
}
.map iframe.clicked {
pointer-events: auto;
}
Sau de a folosi gmap opțiuni
function init() {
var mapOptions = {
scrollwheel: false,