如果在mouseMove事件中重繪了矩形，GoogleMaps會丟失mouseUp事件

以下代碼示例讓我感到困惑。這是我可以用來演示我的問題的一段較大代碼的最簡單版本。基本上我希望用戶能夠通過按住鼠標鍵並拖動來繪製邊界框。如果在mouseMove事件中重繪了矩形，GoogleMaps會丟失mouseUp事件

如果我使用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>

來源

2011-11-21 GeoffSchultz

如果更新的矩形範圍，該mouseup事件是由矩形消耗（這是因爲鼠標光標現在位於矩形內）。有兩個解決辦法：

設置矩形對象的clickable屬性false。矩形將不會消耗事件。 gribBoundingBox = new google.maps.Rectangle（{map：map，bounds：bounds，fillOpacity：0.05，strokeWeight：1，clickable：false}）;
將mouseup事件偵聽器添加到矩形對象。通過這種方式，事件被矩形消耗和處理。在你的例子中，你可以使用相同的偵聽器函數。

google.maps.event.addListener（gribBoundingBox，'mouseup'，function（event）{mouseUp（event）;}）;

來源

2011-11-21 18:00:08 Tomik

Tomik，非常感謝這個答案。這工作得很好，如果沒有你的洞察力，我永遠都不會想到這一點。解決方案1完美工作。 – GeoffSchultz

如果其他解決方案不起作用，還可以嘗試在文檔上註冊mouseup事件。

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

來源

2013-07-05 15:55:19 JustGoscha

如果在mouseMove事件中重繪了矩形，GoogleMaps會丟失mouseUp事件

回答

相關問題