MouseMove olayında dikdörtgen yeniden çizilirse, GoogleMaps mouseUp olayını kaybeder

Aşağıdaki kod örneği beni şaşırttı. Sorunumu göstermek için kullanabileceğim daha büyük bir kod parçasının en basit sürümü. Temel olarak, kullanıcının fare tuşunu basılı tutarak ve sürükleyerek bir sınırlama kutusu çizmesini istiyorum.MouseMove olayında dikdörtgen yeniden çizilirse, GoogleMaps mouseUp olayını kaybeder

FareMove işlevinde bir setBounds kullanarak rectange'ı yeniden çizersem, mouseUp olayını asla göremiyorum! MouseMove işlevinde dikdörtgenin yeniden çizilmesini devre dışı bırakırsam, mouseUp olayını alırım. FareUp olayındaki dikdörtgeni çizerek bunu kısmen halledebilirim, ancak kullanıcı kutuyu sürüklerken ana hatlarını göremiyor.

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

kaynak

2011-11-21 GeoffSchultz

Eğer dikdörtgen sınırları güncellerseniz, mouseup olay dikdörtgenin tüketilmektedir (Bu fare yüzünden var:

Sen Burada http://www.geoffschultz.org/Test/bounding_box.html

de eylem bu kod örneği görebilirsiniz

kodudur imleç şimdi dikdörtgen içinde konumlandırılmıştır).

ayarlayın false için dikdörtgen nesnenin clickable özelliği: Bu iki yöntem vardır. Dikdörtgen, etkinliği daha sonra tüketmez.

gribBoundingBox = new google.maps.Rectangle ({harita: harita, sınırlar: sınırlar, fillOpacity: 0.05, strokeWeight: 1, tıklanabilir: false}); Dikdörtgen nesnesine mouseup olay dinleyicisini ekleyin. Bu şekilde olay, dikdörtgen tarafından tüketilir ve işlenir. Örneğinizde aynı dinleyici işlevini kullanabilirsiniz.

google.maps.event.addListener (gribBoundingBox, 'mouseup', işlev (event) {mouseUp (event);});

kaynak

2011-11-21 18:00:08 Tomik

Tomik, Bu yanıt için çok teşekkür ederim. Bu iyi çalıştı ve ben senin anlayışın olmadan bunu asla çözemezdim. Çözüm 1 mükemmel çalıştı. – GeoffSchultz

Diğer çözüm çalışmıyorsa, belge üzerinde bir mouseup olayı kaydetmeye çalışabilirsiniz.

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

kaynak

2013-07-05 15:55:19 JustGoscha

MouseMove olayında dikdörtgen yeniden çizilirse, GoogleMaps mouseUp olayını kaybeder

cevap

İlgili konular