2011-11-20 12 views
41

Voglio aggiungere codici all'interno della funzione disable() per disabilitare il trascinamento e lo zoom nelle API di Google Maps v3 facendo clic sul pulsante 'disable'.disabilita il trascinamento dello zoom nelle mappe di Google facendo clic su un pulsante

<script type="text/javascript"> 
    var map; 

    function initialize() { 
var uluru = new google.maps.LatLng(21, 57); 
map = new google.maps.Map(document.getElementById("map"), { 
    zoom: 6, 
    center: uluru, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
}); 
} 


function disable(){ 

} 

</script> 


<body onload="initialize()" > 

    <input type="button" id="next" value="disableZoomDrag" onclick="disable()"> 

</body> 

risposta

117

È possibile utilizzare il metodo setOptions() sull'oggetto mappa:

map.setOptions({draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true}); 

Se questo non impedisce lo zoom, si può sempre impostare il minimo e massimo dello zoom per il livello di zoom corrente.

C'è anche la possibilità disableDefaultUI, che probabilmente prende tutti questi eventi in considerazione, ma potrebbe disabilitare cliccando su elementi già esistenti.

+0

grazie mille. you r awesome ^^ –

+0

Solo una nota, puoi anche aggiungerli quando inizi una nuova istanza dell'oggetto map: 'var map = new google.maps.Map (mapElement, mapOptions);' dove 'mapOptions' sarebbero le tue opzioni : 'var mapOptions = {trascinabile: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true};' –

2

@ La risposta di ScottE mi ha indirizzato nella giusta direzione dell'utilizzo di map.setOptions(). Tuttavia, dal API documentation, ho trovato che c'è un insieme più elegante di opzioni da impostare. Forse questi sono più recenti della risposta, ma funzionano abbastanza bene per me.

function disablePanningAndScrolling() 
{ 
    map.setOptions({ 
     zoomControl: false, 
     gestureHandling: 'none' 
    }); 
} 

Disabilita completamente lo zoom e il pan.

Per tornare le cose alla normalità, basta impostare le proprietà ai valori predefiniti:

function enablePanningAndScrolling() 
{ 
    map.setOptions({ 
     zoomControl: true, 
     gestureHandling: 'greedy' // or 'cooperative'* 
    }); 
} 

*: l'impostazione predefinita è avido se la pagina non è scorrevole, cooperativa quando è. Scegli qual è la situazione nella tua applicazione.

Problemi correlati