Question

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

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

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

Answer 1

您与update_timeout走在正确的轨道上，但200毫秒太短了。

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

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

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

双击Vs.单击谷歌地图

1 个答案: