Mẫu mã sau đây đã khiến tôi bối rối. Đó là phiên bản đơn giản nhất của một đoạn mã lớn hơn mà tôi có thể sử dụng để chứng minh vấn đề của mình. Về cơ bản tôi muốn người dùng có thể vẽ một hộp giới hạn bằng cách giữ phím chuột và kéo nó.GoogleMaps mất sự kiện mouseUp nếu hình chữ nhật được vẽ lại trong sự kiện mouseMove
Nếu tôi vẽ lại rectange bằng cách sử dụng setBounds trong hàm mouseMove, tôi không bao giờ thấy sự kiện mouseUp! Nếu tôi vô hiệu hóa việc vẽ lại hình chữ nhật trong hàm mouseMove, tôi sẽ nhận được sự kiện mouseUp. Tôi có thể làm việc một phần xung quanh điều này bằng cách vẽ hình chữ nhật trong sự kiện mouseUp, nhưng sau đó người dùng không thể nhìn thấy đường viền khi họ đang kéo hộp.
Bạn có thể xem mẫu mã này trong hành động ở http://www.geoffschultz.org/Test/bounding_box.html
Đây là mã:
<!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>
Tomik, Cảm ơn bạn Rất nhiều vì câu trả lời này. Điều đó làm việc tốt và tôi sẽ không bao giờ có figured này ra mà không có cái nhìn sâu sắc của bạn. Giải pháp 1 hoạt động hoàn hảo. – GeoffSchultz