如果在mouseMove事件中重绘了矩形,GoogleMaps将丢失mouseUp事件

Question

如果在mouseMove事件中重绘了矩形,GoogleMaps将丢失mouseUp事件

Geo*_*ltz 5 javascript mousemove google-maps-api-3 mouseup mousedown

以下代码示例让我感到困惑.这是我可以用来演示我的问题的更大代码的最简单版本.基本上我希望用户能够通过按住鼠标键并拖动它来绘制边界框.

如果我使用mouseMove函数中的setBounds重绘rectange,我从未看到mouseUp事件!如果我在mouseMove函数中禁用重绘矩形,我会得到mouseUp事件.我可以通过在mouseUp事件中绘制矩形来部分解决这个问题,但是当用户拖动框时,用户无法看到轮廓.

您可以在http://www.geoffschultz.org/Test/bounding_box.html上查看此代码示例

这是代码:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #mapdiv { height: 100% }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var map, mouseDownPos, gribBoundingBox = "", mouseIsDown = 0;

        function display_map()
        {       
            var latlng = new google.maps.LatLng(42, -71);
            var myOptions = {zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
            map = new google.maps.Map(document.getElementById("mapdiv"), myOptions);

            google.maps.event.addListener(map,'mousemove',function(event) {mouseMove(event);}); 
            google.maps.event.addListener(map,'mousedown',function(event) {mouseDown(event);});
            google.maps.event.addListener(map,'mouseup',function(event) {mouseUp(event);}); 
        }

        function mouseMove(event)
        {
            if (mouseIsDown)
            {
            if (gribBoundingBox) // box exists
                {
                var bounds = new google.maps.LatLngBounds(gribBoundingBox.getBounds().getSouthWest(), event.latLng);
                gribBoundingBox.setBounds(bounds); // If this statement is enabled, I lose mouseUp events
                }
            else // create bounding box
                {
                var bounds = new google.maps.LatLngBounds(mouseDownPos, event.latLng);
                gribBoundingBox = new google.maps.Rectangle({map: map, bounds: bounds, fillOpacity: 0.05, strokeWeight: 1});
                }
            }
        }

        function mouseDown(event)
        {
            mouseIsDown = 1;
            mouseDownPos = event.latLng;
            map.setOptions({draggable: false});
        }

        function mouseUp(event)
        {
            if (mouseIsDown)
            {
                mouseIsDown = 0;
                map.setOptions({draggable: true});
        //      var bounds = new google.maps.LatLngBounds(mouseDownPos, event.latLng);
        //      gribBoundingBox.setBounds(bounds); // If used instead of above, box drawn properly
                gribBoundingBox.setEditable(true);
            }
        }
    </script>
</head>

<body onload="display_map()">
    <div id="mapdiv" style="width:100%; height:100%"></div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Tom*_*mik 2

如果更新矩形边界，该mouseup事件将被矩形消耗（这是因为鼠标光标现在位于矩形内）。对此有两种解决方案：

将clickable矩形对象的属性设置为false。那么矩形将不会消耗该事件。

gribBoundingBox = new google.maps.Rectangle({地图: 地图, 边界: 边界, fillOpacity: 0.05, 笔画权重: 1, 可点击: false});
将mouseup事件侦听器添加到矩形对象。这样，事件就由矩形消耗和处理。在您的示例中，您可以使用相同的侦听器函数。

google.maps.event.addListener(gribBoundingBox,'mouseup',function(event) {mouseUp(event);});

归档时间：	14 年，2 月前
查看次数：	1864 次
最近记录：	8 年，7 月前