请问如何禁用 Google 地图上的双击功能,以避免在双击地图时关闭信息窗口?是否可以通过 Google 地图 API 实现?
请问如何禁用 Google 地图上的双击功能,以避免在双击地图时关闭信息窗口?是否可以通过 Google 地图 API 实现?
您可以通过设置以下google.maps.MapOptions对象属性,在Google Maps上禁用双击缩放:
disableDoubleClickZoom: true
示例代码:
var mapOptions = {
scrollwheel: false,
disableDoubleClickZoom: true, // <---
panControl: false,
streetViewControl: false,
center: defaultMapCenter
};
您可以利用这个特性,如果是双击,则触发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();
});
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
}
您可以禁用标记的“双击”事件。
event.stopPropagation();
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
请注意,这不是答案,它只是与Ravindranath Akila已经回答的解决方案相同,适用于更广泛的解决方案[例如移动平台],集中于一个可重复使用的方法而不使用全局变量。
我们在Win 8.1移动应用程序中遇到了类似的问题。感谢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;
});
}
这里有一个示例,可以实时预览坐标。
当您单击一次时,它会保存坐标,双击时会放置一个标记。
请记得注册并创建一个密钥,并将其粘贴到src脚本中的YOUR-API-KEY
处
<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>
这是不可能的,你基本上必须阻止或预防事件发生。
你可以尝试像EXT JS中的createInterceptor()一样的方法。这将在事件被触发之前触发,你可以返回false来防止实际事件的触发,但我不确定它是否会防止在该代码中事件被触发之前执行的代码。