Javascript 如果在mouseMove事件中重画矩形，GoogleMaps将丢失mouseUp事件
下面的代码示例让我感到困惑。这是我可以用来演示我的问题的一段较大代码的最简单版本。基本上，我希望用户能够通过按住鼠标键并拖动来绘制边界框 如果我在mouseMove函数中使用setBounds重新绘制rectange，我将永远看不到mouseUp事件！如果我在mouseMove函数中禁用矩形的重画，我会得到mouseUp事件。我可以通过在mouseUp事件中绘制矩形来部分解决这个问题，但是用户在拖动框时看不到轮廓 您可以在中看到此代码示例的实际操作 代码如下：Javascript 如果在mouseMove事件中重画矩形，GoogleMaps将丢失mouseUp事件,javascript,google-maps-api-3,mousemove,mousedown,mouseup,Javascript,Google Maps Api 3,Mousemove,Mousedown,Mouseup,下面的代码示例让我感到困惑。这是我可以用来演示我的问题的一段较大代码的最简单版本。基本上，我希望用户能够通过按住鼠标键并拖动来绘制边界框 如果我在mouseMove函数中使用setBounds重新绘制rectange，我将永远看不到mouseUp事件！如果我在mouseMove函数中禁用矩形的重画，我会得到mouseUp事件。我可以通过在mouseUp事件中绘制矩形来部分解决这个问题，但是用户在拖动框时看不到轮廓 您可以在中看到此代码示例的实际操作 代码如下： <!DOCTYPE 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>
html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#mapdiv{高度：100%}
变量映射，mouseDownPos，gribBoundingBox=“”，mouseIsDown=0；
函数显示图（）
{
var latlng=新的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）；
addListener（map，'mousemove'，function（event）{mousemove（event）；}）；
addListener（映射，'mousedown'，函数（事件）{mousedown（事件）；}）；
addListener（映射，'mouseup'，函数（事件）{mouseup（事件）；}）；
}
函数mouseMove（事件）
{
如果（鼠标按下）
{
if（gribBoundingBox）//框存在
{
var bounds=new google.maps.LatLngBounds（gribBoundingBox.getBounds（）.getsoutwest（），event.latLng）；
gribBoundingBox.setBounds（bounds）；//如果启用此语句，我将丢失mouseUp事件
}
else//创建边界框
{
var bounds=new google.maps.LatLngBounds（mouseDownPos，event.latLng）；
gribBoundingBox=new google.maps.Rectangle（{map:map，bounds:bounds，fillOpacity:0.05，strokeWeight:1}）；
}
}
}
函数mouseDown（事件）
{
mouseIsDown=1；
mouseDownPos=event.latLng；
setOptions（{draggable:false}）；
}
函数mouseUp（事件）
{
如果（鼠标按下）
{
mouseIsDown=0；
setOptions（{draggable:true}）；
//var bounds=new google.maps.LatLngBounds（mouseDownPos，event.latLng）；
//gribBoundingBox.setBounds（bounds）；//如果不使用上面的选项，则正确绘制长方体
gribBoundingBox.setEditable（真）；
}
}
mouseupclickablefalsemouseup如果其他解决方案不起作用，还可以尝试在文档上注册mouseup事件
document.addEventListener('mouseup', function(evt){
stopDraw(evt);
});
托米克，非常感谢你的回答。这很好&如果没有你的洞察力，我永远不会明白这一点。解决方案1非常有效。