Javascript 通过单击按钮禁用在 Google 地图中的缩放拖动
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8204144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
disable zooming dragging in Google maps by clicking on a button
提问by Sami Al-Subhi
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 地图 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>
回答by ScottE
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
选项,它可能会考虑所有这些事件,但它可能会禁用单击现有元素。
回答by Jasper
@ScottE's answer pointed me in the right direction of using map.setOptions()
. However, from the API documentation, I found that there is a more elegant set of options to set. Perhaps these are newer than the answer, but they work pretty well for me.
@ScottE 的回答为我指明了使用map.setOptions()
. 但是,从API 文档 中,我发现有一组更优雅的选项可以设置。也许这些比答案更新,但它们对我来说效果很好。
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.
*:如果页面不可滚动,则默认为贪婪,当它是合作时。选择您的应用程序中的任何一种情况。