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

Question

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

Sam*_*bhi 44 javascript google-maps google-maps-api-3

我想在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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sco*_*ttE 124

您可以setOptions()在地图对象上使用该方法:

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

Run Code Online (Sandbox Code Playgroud)

如果这不能防止缩放,您始终可以将最小和最大缩放设置为当前缩放级别.

还有一个disableDefaultUI选项,可能会考虑所有这些事件,但它可能会禁用单击现有元素.

请注意，您还可以在启动地图对象的新实例时添加这些：`var map = new google.maps.Map(mapElement, mapOptions);` 其中`mapOptions` 将是您的选项：`var mapOptions = {可拖动：false，zoomControl：false，滚轮：false，disableDoubleClickZoom：true};` (2认同)

Answer 2

Jas*_*per 6

@ScottE 的回答为我指明了使用map.setOptions(). 但是，从API 文档中，我发现有一组更优雅的选项可以设置。也许这些比答案更新，但它们对我来说效果很好。

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

Run Code Online (Sandbox Code Playgroud)

这将完全禁用缩放和平移。

要恢复正常，只需将属性设置回默认值：

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

Run Code Online (Sandbox Code Playgroud)

*：如果页面不可滚动，则默认为贪婪，当它是合作时。选择您的应用程序中的任何一种情况。

归档时间：	14 年前
查看次数：	61026 次
最近记录：	7 年，11 月前