Javascript 双击与单击谷歌地图
我编写了下面的代码，让用户在单击一次时在地图上放置一个标记，而在单击两次时什么也不做（实际上是缩放地图）。 代码如下：Javascript 双击与单击谷歌地图,javascript,google-maps,Javascript,Google Maps,我编写了下面的代码，让用户在单击一次时在地图上放置一个标记，而在单击两次时什么也不做（实际上是缩放地图）。 代码如下： <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Simple
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>var update_timeout = null;var n=0;var fromLat = "";
var toLat = "";
var fromLon = "";
var toLon = "";
var uniqueId = 0;
var marker = [];
var markers = [];
</script>
<script>
function initialize() {
var update_timeout = null;
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
zoom: 10,
center: myLatlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.setCenter(new google.maps.LatLng(45.562544, -122.588126));
google.maps.event.addListener(map, 'click', function(event) {
n++;
console.log(n);
if (((n == 2)||(n == 1)) && ((fromLon=="")&&(fromLat==""))) {
fromLon = event.latLng.lng();
fromLat = event.latLng.lat();
placeMarker(event.latLng);
}
else if (((n == 2)||(n == 1)) && ((toLon=="")&&(toLat==""))) {
toLon = event.latLng.lng();
toLat = event.latLng.lat();
placeMarker(event.latLng);
}
else {
}
update_timeout = setTimeout(function(){
placeMarker(event.latLng);
}, 200);
});
google.maps.event.addListener(map, "dblclick", function (e) {
n--;
clearTimeout(update_timeout);
console.log("Double Click"); });
}
function placeMarker(location) {
var id = uniqueId++;
markers[id] = marker;
var marker = new google.maps.Marker({
position: location,
map: map
});
}
</script>
</head>
<body onload="initialize()">
<div id="map-canvas"></div>
</body>
</html>
简单标记
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
var update_timeout=null；var n=0；var fromLat=“”；
var toLat=“”；
var fromLon=“”；
var-toLon=“”；
var uniqueId=0；
var标记=[]；
var标记=[]；
函数初始化（）{
var update_timeout=null；
var mylatng=new google.maps.LatLng（-25.363882131.044922）；
变量映射选项={
缩放：10，
中心：myLatlng
}
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
map.setCenter（新的google.maps.LatLng（45.562544，-122.588126））；
google.maps.event.addListener（映射，'click'，函数（事件）{
n++；
控制台日志（n）；
如果（（n==2）| |（n==1））&&（（fromLon==“”）和（&（fromLat==“”）））{
fromLon=event.latLng.lng（）；
fromLat=event.latLng.lat（）；
地点标记（事件标记）；
}
如果（（n==2）| |（n==1））&&&（（托伦==“”）和（&（托拉特==“”））则为else{
toLon=event.latLng.lng（）；
toLat=event.latLng.lat（）；
地点标记（事件标记）；
}
否则{
}
update_timeout=setTimeout（函数（）{
地点标记（事件标记）；
}, 200);
});
google.maps.event.addListener（映射，“dblclick”，函数（e）{
n--；
clearTimeout（更新超时）；
log（“双击”）；}）；
}
功能位置标记（位置）{
变量id=唯一id++；
标记器[id]=标记器；
var marker=new google.maps.marker({
位置:位置,，
地图：地图
});
}
但是，当我单击两次时，它会将标记放置在地图上。此外，我将var n用于仅放置两个标记，但绘制了多个标记 您的
更新超时时间是正确的，但是200ms太短了
不幸的是，无法找出实际的双击延迟是什么。它可以由用户调整，浏览器JavaScript不提供API来查询实际延迟
在Windows上，我相信默认延迟是400毫秒，但用户可以将其设置为5000毫秒。我不确定OSX和Linux上对应的数字是多少
我通常在编写这样的代码时使用500毫秒。大多数人从不更改默认值，因此大多数情况下这应该可以正常工作。我尝试将其设置为600毫秒，但同样的问题也存在。虽然我单击了两次并且标记的数量超过了2，但是单击被触发。哦，我没有注意到您在setTimeout（）
外部和内部都有placeMarker（）
调用。要使其工作，您应该只从setTimeout（）
回调内部调用placeMarker（）
。这些行不是从回调内部调用它吗<代码>更新_timeout=setTimeout（函数（）{placeMarker（event.latLng）；}，200）；}）placeMarker（）setTimeout（）placeMarker（）