GoogleMaps traci zdarzenie mouseUp, jeśli prostokąt został przerysowany w zdarzenie mouseMove

Poniższy przykładowy kod mnie zdziwił. Jest to najprostsza wersja większego fragmentu kodu, którą mogę wykorzystać do zademonstrowania mojego problemu. Zasadniczo chcę, aby użytkownik mógł narysować obwiednię, przytrzymując klawisz myszy i przeciągając go.GoogleMaps traci zdarzenie mouseUp, jeśli prostokąt został przerysowany w zdarzenie mouseMove

Jeśli przerysuję prostokąt za pomocą setBounds w funkcji mouseMove, nigdy nie zobaczę zdarzenia MouseUp! Jeśli wyłączę ponowne rysowanie prostokąta w funkcji mouseMove, otrzymam zdarzenie mouseUp. Mogę częściowo obejść to przez narysowanie prostokąta w zdarzeniu MouseUp, ale wtedy użytkownik nie może zobaczyć konturu podczas przeciągania okna.

Można zobaczyć ten przykładowy kod w akcji na http://www.geoffschultz.org/Test/bounding_box.html

Oto kod:

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

Źródło

2011-11-21 GeoffSchultz

przypadku aktualizacji granic prostokąta zdarzenie mouseup jest zużywana przez prostokąt (to dlatego, że myszy kursor jest teraz umieszczony wewnątrz prostokąta). Istnieją dwa rozwiązania to:

Set clickable właściwością obiektu Prostokątna false. Prostokąt nie będzie wówczas wykorzystywał tego zdarzenia.

gribBoundingBox = new google.maps.Rectangle ({mapa: mapa, ograniczenia: granice, wypełnienieOprawa: 0.05, strokeWeight: 1, klikalne: false});
Dodaj detektor zdarzeń do obiektu prostokąta. W ten sposób wydarzenie zostanie skonsumowane i obsłużone przez prostokąt. W twoim przykładzie możesz użyć tej samej funkcji nasłuchiwania.

google.maps.event.addListener (gribBoundingBox, "mouseup", funkcja (zdarzenie) {mouseUp (zdarzenie);});

Źródło

2011-11-21 18:00:08 Tomik

Tomik, Dziękuję bardzo za odpowiedź. To działało dobrze i nigdy bym tego nie rozgryzł bez twojego wglądu. Rozwiązanie 1 działało idealnie. – GeoffSchultz

Można również spróbować zarejestrować zdarzenie mouseup na dokumencie, jeśli inne rozwiązanie nie działa.

document.addEventListener('mouseup', function(evt){ 
    stopDraw(evt); 
});

Źródło

2013-07-05 15:55:19 JustGoscha

GoogleMaps traci zdarzenie mouseUp, jeśli prostokąt został przerysowany w zdarzenie mouseMove

Odpowiedz

Powiązane problemy