web-dev-qa-db-fra.com

désactiver le zoom glisser sur Google maps en cliquant sur un bouton

Je veux ajouter des codes à l'intérieur de la fonction disable () pour désactiver le glissement et le zoom dans l'API Google maps v3 en cliquant sur le bouton "désactiver".

<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>
javascriptgoogle-mapsgoogle-maps-api-3
44
Sami Al-Subhi

Vous pouvez utiliser la méthode setOptions() sur l'objet carte:

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

Si cela n'empêche pas le zoom, vous pouvez toujours régler le zoom minimum et maximum au niveau de zoom actuel.

Il existe également l'option disableDefaultUI, qui prend probablement en compte tous ces événements, mais elle peut désactiver le clic sur les éléments existants.

124
ScottE

La réponse de @ ScottE m'a orienté dans la bonne direction en utilisant map.setOptions(). Cependant, à partir de la documentation API , j'ai trouvé qu'il y a un ensemble d'options plus élégant à définir. Peut-être que ce sont plus récents que la réponse, mais ils fonctionnent assez bien pour moi.

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

Cela désactive complètement le zoom et le panoramique.

Pour ramener les choses à la normale, remettez simplement les propriétés à leurs valeurs par défaut:

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

*: la valeur par défaut est gourmande si la page n'est pas déroulante, coopérative lorsqu'elle l'est. Choisissez la situation dans votre candidature.

2
Jasper