双击Vs.单击谷歌地图

I have written the following code for making the user place a marker on the map if he clicked once and do nothing (actually zooming the map) when he click twice. Here is the code:

我编写了以下代码,用于让用户在地图上放置一个标记,如果他点击一次并且在他点击两次时什么都不做(实际上缩放地图)。这是代码:

    <!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>

but, when i click two times, it places the marker on map. Also, i put the var n for placing only two markers, but there are multiple markers drawn.

但是,当我点击两次时,它会将标记放在地图上。此外,我把var n放置为仅放置两个标记,但是绘制了多个标记。

1 个解决方案

#1

You're on the right track with your update_timeout, but 200ms is too short.

你的update_timeout正处于正确的轨道上,但200ms太短了。

Unfortunately, there is no way to find out what the actual double-click delay is. It's adjustable by the user, and browser JavaScript doesn't provide an API to query the actual delay.

不幸的是,没有办法找出实际的双击延迟是什么。它可由用户调整,浏览器JavaScript不提供查询实际延迟的API。

On Windows, I believe the default delay is 400ms, but a user could set it as slow as 5000ms. I'm not sure what the corresponding numbers are on OSX and Linux.

在Windows上,我认为默认延迟是400毫秒,但用户可以将其设置为5000毫秒。我不确定OSX和Linux上的相应数字是什么。

I usually use 500ms when I'm writing code like this. Most people never change the default, so this should work OK most of the time.

当我编写这样的代码时,我通常使用500ms。大多数人从不更改默认值,因此大多数情况下这应该可以正常工作。

#1