下面的代码示例让我感到困惑。这是我可以用来演示我的问题的较大代码段的最简单版本。基本上我希望用户能够通过按住鼠标键并拖动它来绘制边界框。
如果我在 mouseMove 函数中使用 setBounds 重绘矩形,我永远不会看到 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>
如果更新矩形边界,
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);});
如果其他解决方案不起作用,也可以尝试在文档上注册 mouseup 事件。
document.addEventListener('mouseup', function(evt){
stopDraw(evt);
});
如果 GoogleMaps 在使用 mouseMove 事件绘制(例如矩形)时间歇性地丢失 mouseUp 事件,则可能是兴趣点 (POI) 拦截了 mouseUp 事件。
这可以通过使 POI 不可点击来解决(可以在 MapOptions 中设置)
const mapOptions: google.maps.MapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 1,
minZoom: 1,
clickableIcons: false
};
这对我有用,但如果您需要/想要 POI,那么您可以考虑在 mouseDown 上禁用它们,或者考虑拦截它们的 mouseUp 事件并触发您想要的 mouseUp 以完成绘图。