以下代码示例让我感到困惑.这是我可以用来演示我的问题的更大代码的最简单版本.基本上我希望用户能够通过按住鼠标键并拖动它来绘制边界框.
如果我使用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);}); …Run Code Online (Sandbox Code Playgroud)