Javascript 禁用在谷歌地图上双击左键
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3186635/
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 double left click on google map
提问by davidlee
May I know how can I disable double click on google map so that the info window will not close when I double click on google map? Can it be done through google map api?
我可以知道如何禁用双击谷歌地图以便双击谷歌地图时信息窗口不会关闭吗？可以通过谷歌地图api完成吗？
回答by Jatin Dhoot
You can disable double-click zoom on Google Maps by setting the following google.maps.MapOptions object property:
您可以通过设置以下google.maps.MapOptions 对象属性来禁用 Google 地图上的双击缩放：
disableDoubleClickZoom: true
Sample code:
示例代码：
var mapOptions = {
scrollwheel: false,
disableDoubleClickZoom: true, // <---
panControl: false,
streetViewControl: false,
center: defaultMapCenter
};
回答by Ravindranath Akila
You can take advantage of, dblclick fires if it is a double click, and single click fires in such occations only once.
您可以利用，如果是双击，则 dblclick 会触发，而在这种情况下，单击只会触发一次。
runIfNotDblClick = function(fun){
if(singleClick){
whateverurfunctionis();
}
};
clearSingleClick = function(fun){
singleClick = false;
};
singleClick = false;
google.maps.event.addListener(map, 'click', function(event) {// duh! :-( google map zoom on double click!
singleClick = true;
setTimeout("runIfNotDblClick()", 500);
});
google.maps.event.addListener(map, 'dblclick', function(event) {// duh! :-( google map zoom on double click!
clearSingleClick();
});
回答by thennebelle
You need an external var to do that :
你需要一个外部变量来做到这一点：
var isDblClick;
google.maps.event.addListener(map, 'dblclick', function (event) {
isDblClick = true;
myDlbClickBelovedFunction();
});
google.maps.event.addListener(map, 'click', function (event) {
setTimeout("mySingleClickBelovedFunction();;", 200);
});
function mySingleClickBelovedFunction() {
if (!isDblClick) {
// DO MY SINGLE CLICK BUSINESS :)
}
// DO NOTHING
}
回答by Václav ?vára
(Please consider that this is not answer, it is only same solution like Ravindranath Akila has been answering already, for using in wider ranges of solutions [eg. Mobile platforms] concentrated on one reusable method without global variables)
（请考虑这不是答案，它只是与 Ravindranath Akila 已经回答的相同的解决方案，用于更广泛的解决方案 [例如移动平台] 专注于一种没有全局变量的可重用方法）
We have similar trouble by Win 8.1 Mobile app. Thanks to Ravindranath Akila we finalized solution which is defined in one method and checking also zooming and moving with center of map. Anyway sometimes happened that the address we get from map-click is wrong - improvements are welcomed.
Win 8.1 Mobile 应用程序也有类似的问题。感谢 Ravindranath Akila，我们最终确定了以一种方法定义的解决方案，并检查了地图中心的缩放和移动。无论如何，有时会发生我们从地图点击获得的地址是错误的 - 欢迎改进。
// code
{
// adding event method
addGoogleClickEnventHandler(map, function(e) {
// example code inside click event
var clickLocation = e.latLng;
getAddress(clickLocation);
});
}
// function
function addGoogleClickEnventHandler(googleEventableObject, handlingFunction) {
var boundsChanged = false;
var centerChanged = false;
var singleClick = false;
function runIfNotDblClick(obj) {
if(singleClick && !boundsChanged && !centerChanged){
handlingFunction(obj);
}
};
googleEventableObject.addListener('bounds_changed', function () { boundsChanged = true; });
googleEventableObject.addListener('center_changed', function () { centerChanged = true; });
googleEventableObject.addListener('dblclick', function () { singleClick = false; });
googleEventableObject.addListener('click', function(obj) {
singleClick = true;
setTimeout(function() {
runIfNotDblClick(obj);
}, 200);
boundsChanged = false;
centerChanged = false;
});
}
回答by Rami Nour
Here's an example that gives a live preview of the coordinates.
这是一个实时预览坐标的示例。
When you click once, it saves the cordinates and when you double click it puts a marker.
当您单击一次时，它会保存坐标，而当您双击时，它会放置一个标记。
Remember to sign up and create a key and paste it in where it says
YOUR-API-KEYin the src script<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap
请记住注册并创建一个密钥并将其粘贴
YOUR-API-KEY到 src 脚本中的位置<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap
<html>
<head>
<title>Google Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 300px;
width: 600px;
}
</style>
</head>
<body>
<div id="latclicked"></div>
<div id="longclicked"></div>
<div id="latmoved"></div>
<div id="longmoved"></div>
<div style="padding:10px">
<div id="map"></div>
</div>
<script type="text/javascript">
let map;
function initMap() {
let latitude = 27.7172453; // YOUR LATITUDE VALUE
let longitude = 85.3239605; // YOUR LONGITUDE VALUE
let myLatLng = {lat: latitude, lng: longitude};
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 14,
disableDoubleClickZoom: true, // disable the default map zoom on double click
});
// Update lat/long value of div when anywhere in the map is clicked
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('latclicked').innerHTML = event.latLng.lat();
document.getElementById('longclicked').innerHTML = event.latLng.lng();
});
// Update lat/long value of div when you move the mouse over the map
google.maps.event.addListener(map,'mousemove',function(event) {
document.getElementById('latmoved').innerHTML = event.latLng.lat();
document.getElementById('longmoved').innerHTML = event.latLng.lng();
});
let marker = new google.maps.Marker({
position: myLatLng,
map: map,
//title: 'Hello World'
// setting latitude & longitude as title of the marker
// title is shown when you hover over the marker
title: latitude + ', ' + longitude
});
// Update lat/long value of div when the marker is clicked
marker.addListener('click', function(event) {
document.getElementById('latclicked').innerHTML = event.latLng.lat();
document.getElementById('longclicked').innerHTML = event.latLng.lng();
});
// Create new marker on double click event on the map
google.maps.event.addListener(map,'dblclick',function(event) {
let marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: event.latLng.lat()+', '+event.latLng.lng()
});
// Update lat/long value of div when the marker is clicked
marker.addListener('click', function() {
document.getElementById('latclicked').innerHTML = event.latLng.lat();
document.getElementById('longclicked').innerHTML = event.latLng.lng();
});
});
// Create new marker on single click event on the map
/*google.maps.event.addListener(map,'click',function(event) {
let marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: event.latLng.lat()+', '+event.latLng.lng()
});
});*/
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
async defer></script>
</body>
回答by CrazyEnigma
It cannot be done, you would essentially have to block or prevent the event from happening.
这是不可能的，您基本上必须阻止或防止事件发生。
You could try something like createInterceptor() like in EXT JS. This would fire before the event is fired, and you can return false to prevent the actual event to fire, but I am not sure it will prevent the code from executing before the event is fired within that code.
您可以尝试像 EXT JS 中的 createInterceptor() 之类的东西。这将在触发事件之前触发，您可以返回 false 以防止触发实际事件，但我不确定它会阻止代码在该代码中触发事件之前执行。
