0
次のような動作を試みています。マップをクリックすると、四角形が表示されます。移動としてマウス（ドラッグしない）私は矩形を最初のクリックとマウスの位置に合わせて調整したい。Google Maps API V3で長方形を消去するには
2回目にマウスをクリックすると、（空間検索クエリの）コーナー座標を取得してから、矩形のサイズ変更を停止したいと考えています。
3回目のマウスクリックで、四角形が消えます。
矩形が表示され、サイズが変更されますが、マウスに続いて停止することはありません。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#map { width: 750px; height: 500px; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"/></script>
<script type="text/javascript">
var start = new google.maps.LatLng();
var clicked=0;
window.onload = function()
{
var settings = {
mapTypeId: google.maps.MapTypeId.TERRAIN, // map type
zoom: 8, // map type
center: new google.maps.LatLng(-33.890542, 151.274856) // coordinates
};
var map = new google.maps.Map(document.getElementById("map"), settings);
rectangle = new google.maps.Rectangle();
google.maps.event.addListener(map, 'click', function(event) {
loc = event.latLng;
if(clicked==0){
$("#start").html(loc.toString());
start=loc;
// start the rectangle
var rectOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map
};
rectangle.setOptions(rectOptions);
clicked=1;
}
else if(clicked==1){
$("#end").html(loc.toString());
clicked=2;
alert("clicked "+clicked);
}
else if(clicked==2){
$("#start").html("");
$("#dragged").html("");
$("#end").html("");
clicked=0;
}
});
google.maps.event.addListener(map, 'mousemove', function(event) {
if(clicked==1){
loc = event.latLng;
$("#dragged").html(loc.toString());
$("#dragged").html(loc.toString());
var bounds = new google.maps.LatLngBounds();
bounds.extend(start);
bounds.extend(loc);
rectangle.setBounds(bounds);
}
else if(clicked==2){
alert("mouseover: "+clicked);
rectangle.setMap(null);
}
});
};
</script>
</head>
<body>
<div id="map"></div>
</body>
を私は長方形のを変更しなければならなかった実現http://stackoverflow.com/questions/5090174/google-maps-api-v3-mousemove-and-click-event-comboこの質問を使用しますプロパティ。だから私は 'clickable：false'をvar rectOptionsに追加しました。私はこれにより、矩形をクリックできないようにして、マップがクリックイベントを登録するようにします。 – Ankur