GoogleMaps теряет событие mouseUp, если прямоугольник перерисовывается в событии mouseMove

Следующий пример кода меня сбил с толку. Это самая простая версия большого фрагмента кода, которую я могу использовать для демонстрации своей проблемы. В основном я хочу, чтобы пользователь мог рисовать ограничивающую рамку, удерживая нажатой клавишу мыши и перетаскивая ее.

Если я перерисую прямоугольник, используя setBounds в функции mouseMove, я никогда не увижу событие 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>

javascript google-maps-api-3 mousemove mouseup mousedown
person GeoffSchultz    schedule 21.11.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Если вы обновляете границы прямоугольника, событие mouseup потребляется прямоугольником (это потому, что курсор мыши теперь расположен внутри прямоугольника). Для этого есть два решения:

  1. Установите для свойства clickable объекта прямоугольник значение false. Тогда прямоугольник не будет потреблять событие.

    gribBoundingBox = new google.maps.Rectangle({карта: карта, границы: границы, fillOpacity: 0,05, strokeWeight: 1, clickable: false});

  2. Добавьте прослушиватель событий mouseup к прямоугольному объекту. Таким образом, событие потребляется и обрабатывается прямоугольником. В вашем примере вы можете использовать ту же функцию прослушивателя.

    google.maps.event.addListener (gribBoundingBox, 'mouseup', функция (событие) {mouseUp (событие);});

person Tomik    schedule 21.11.2011
comment
Tomik, Большое спасибо за этот ответ. Это сработало отлично, и я бы никогда не понял этого без вашего понимания. Решение 1 работало отлично. - person GeoffSchultz; 25.11.2011

arrow_upward
0
arrow_downward

Можно также попытаться зарегистрировать событие mouseup в документе, если другое решение не работает.

document.addEventListener('mouseup', function(evt){
    stopDraw(evt);
});
person JustGoscha    schedule 05.07.2013