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

时间:2011-11-20 19:41:33

标签: 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>

2 个答案:

答案 0 :(得分:123)

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

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

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

还有disableDefaultUI选项,可能会考虑所有这些事件,但可能会禁用点击现有元素。

答案 1 :(得分:2)

@ ScottE的回答指出了我使用map.setOptions()的正确方向。但是,从API documentation开始,我发现有一套更优雅的选项可供设置。也许这些比答案更新,但它们对我来说效果很好。

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

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

要将事物恢复正常,只需将属性设置回默认值:

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

*:如果页面不可滚动,则默认为贪婪,合并时为默认值。选择申请中的情况。