2011-11-20 12 views
41

Quiero agregar códigos dentro de la función disable() para deshabilitar el arrastre y el zoom en Google maps API v3 haciendo clic en el botón 'deshabilitar'.deshabilitar zoom arrastrando en Google maps haciendo clic en un botón

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

Respuesta

117

Usted puede utilizar el método setOptions() en el objeto de mapa:

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

Si esto no impide que el zoom, siempre se puede establecer el mínimo y el máximo de zoom para el nivel de zoom actual.

También existe la opción disableDefaultUI, que probablemente tenga todos estos eventos en cuenta, pero podría deshabilitarse haciendo clic en los elementos existentes.

+0

muchas gracias. Eres impresionante ^^ –

+0

Solo una nota, también puedes agregar estos al iniciar una nueva instancia del objeto del mapa: 'var map = new google.maps.Map (mapElement, mapOptions);' donde 'mapOptions' serían tus opciones : 'var mapOptions = {draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true};' –

2

@ La respuesta de ScottE me apuntó en la dirección correcta de usar map.setOptions(). Sin embargo, desde el API documentation, encontré que hay un conjunto más elegante de opciones para establecer. Quizás estos son más nuevos que la respuesta, pero funcionan bastante bien para mí.

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

Esto deshabilita completamente el acercamiento y el paneo.

Para volver las cosas a la normalidad, acaba de establecer las propiedades a sus valores predeterminados:

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

*: el valor predeterminado es codicioso si la página no es desplazable, cooperativo cuando es. Elija cualquiera que sea la situación en su aplicación.

Cuestiones relacionadas