5
次のコードサンプルは私を困惑させています。私の問題を実証するために使用できる、より大きなコードの最も単純なバージョンです。基本的には、マウスキーを押しながらドラッグすることで、ユーザーがバウンディングボックスを描画できるようにしたいと考えています。mouseMoveイベントで矩形が再描画された場合、GoogleMapsのmouseUpイベントが失われる
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>
Tomik、 この回答のためにありがとうございました。それはうまくいきました＆私はあなたの洞察なしにこれを決して解明しませんでした。ソリューション1は完全に機能しました。 – GeoffSchultz