简体   繁体   English

通过单击按钮禁用Google地图中的缩放拖动

[英]disable zooming dragging in Google maps by clicking on a button

I want to add codes inside disable() function to disable dragging and zooming in Google maps API v3 by clicking on 'disable' button. 我想在disable()函数中添加代码,通过单击“禁用”按钮禁用Google Maps API v3中的拖放。

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

You can use the setOptions() method on the map object: 您可以在地图对象上使用setOptions()方法:

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

If this doesn't prevent zooming, you could always set the minimum and maximum zoom to the current zoom level. 如果这不能防止缩放,您始终可以将最小和最大缩放设置为当前缩放级别。

There is also the disableDefaultUI option, which probably takes all of these events into account, but it might disable clicking on existing elements. 还有disableDefaultUI选项,它可能会考虑所有这些事件,但可能会禁用单击现有元素。

@ScottE's answer pointed me in the right direction of using map.setOptions() . @ ScottE的回答指出了我使用map.setOptions()的正确方向。 However, from the API documentation , I found that there is a more elegant set of options to set. 但是,从API文档中 ,我发现有一组更优雅的选项可供设置。 Perhaps these are newer than the answer, but they work pretty well for me. 也许这些比答案更新,但它们对我来说效果很好。

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

This completely disables zooming and panning. 这会完全禁用缩放和平移。

To return things to normal, just set the properties back to their defaults: 要将事物恢复正常,只需将属性设置回默认值:

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

*: the default is greedy if the page isn't scrollable, cooperative when it is. *:如果页面不可滚动,则默认为贪婪,如果页面不可滚动,则默认为贪婪。 Pick whichever was the situation in your application. 选择您的应用程序中的情况。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM