Google maps api 3 如何使用Google Maps API V3清除矩形
我试图得到以下行为。单击贴图时，我希望开始显示一个矩形。作为一个移动鼠标（不是拖动）我希望矩形调整自己，以适应第一次点击和鼠标位置 当我第二次单击鼠标时，我想捕获角坐标（用于空间搜索查询），然后让矩形停止调整大小 在第三次鼠标单击时，我希望矩形消失 此时矩形出现并调整大小，但它始终跟随鼠标Google maps api 3 如何使用Google Maps API V3清除矩形,google-maps-api-3,click,mousemove,Google Maps Api 3,Click,Mousemove,我试图得到以下行为。单击贴图时，我希望开始显示一个矩形。作为一个移动鼠标（不是拖动）我希望矩形调整自己，以适应第一次点击和鼠标位置 当我第二次单击鼠标时，我想捕获角坐标（用于空间搜索查询），然后让矩形停止调整大小 在第三次鼠标单击时，我希望矩形消失 此时矩形出现并调整大小，但它始终跟随鼠标 <!DOCTYPE html> <html> <head> <style type="text/css"> div#map { width: 750px; he
<!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>
分区地图{宽度：750px；高度：500px；}
var start=new google.maps.LatLng（）；
var=0；
window.onload=函数（）
{
变量设置={
mapTypeId:google.maps.mapTypeId.TERRAIN，//地图类型
缩放：8，//贴图类型
中心：新的google.maps.LatLng（-33.890542151.274856）//坐标
};
var map=new google.maps.map（document.getElementById（“map”），设置）；
矩形=新的google.maps.rectangle（）；
google.maps.event.addListener（映射，'click'，函数（事件）{
loc=event.latLng；
如果（单击==0）{
$（“#start”）.html（loc.toString（））；
开始=loc；
//开始矩形
变量选项={
strokeColor:#FF0000“，
笔划不透明度：0.8，
冲程重量：2，
fillColor:#FF0000“，
不透明度：0.35，
地图：地图
};
矩形。设置选项（矩形选项）；
单击=1；
}
否则如果（单击==1）{
$（“#end”）.html（loc.toString（））；
单击=2；
警报（“单击”+单击）；
}
否则如果（单击==2）{
$（“#开始”）.html（“”）；
$（“#拖动”）.html（“”）；
$（“#end”）.html（“”）；
单击=0；
}
});
google.maps.event.addListener（映射，'mousemove'，函数（事件）{
如果（单击==1）{
loc=event.latLng；
$（“#拖动”）.html（loc.toString（））；
$（“#拖动”）.html（loc.toString（））；
var bounds=new google.maps.LatLngBounds（）；
扩展（开始）；
边界扩展（loc）；
矩形.立根（边界）；
}
否则如果（单击==2）{
警报（“鼠标悬停：+点击）；
矩形.setMap（空）；
}
});
};
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>
<script type="text/javascript">
function initialize() {
// render map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng( 36.175, -115.1363889 ),
mapTypeControl: false,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// get the DrawingManager - Remember to include &libraries=drawing in the API call
var draw = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.RECTANGLE,
google.maps.drawing.OverlayType.POLYGON
]
},
rectangleOptions: {
fillColor: '#990000',
fillOpacity: .4,
strokeWeight: 3,
strokeColor: '#999',
clickable: true,
editable: true,
zIndex: 1
}
});
// set the cursor to the rectangle
draw.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);
// adds a listener for completed overlays, most work done in here
google.maps.event.addListener(draw, 'overlaycomplete', function(event) {
draw.setDrawingMode(null); // put the cursor back to the hand
if (event.type == google.maps.drawing.OverlayType.CIRCLE) {
//do something
}
if (event.type == google.maps.drawing.OverlayType.POLYGON) {
// do something
}
if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {
// on click, unset the overlay, and switch the cursor back to rectangle
google.maps.event.addListener(event.overlay, 'click', function() {
this.setMap(null);
draw.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);
});
}
});
// end of initialize
draw.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
函数初始化（）{
//渲染贴图
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：新google.maps.LatLng（36.175，-115.1363889），
mapTypeControl:false，
导航控制：对，
导航控制选项：{
样式：google.maps.NavigationControlStyle.SMALL
},
mapTypeId:google.maps.mapTypeId.TERRAIN
});
//获取DrawingManager-记住在API调用中包括&libraries=drawing
var draw=new google.maps.drawing.DrawingManager({
drawingControl：对，
drawingControlOptions：{
位置：google.maps.ControlPosition.TOP\u右上角，
绘图模式：[
google.maps.drawing.overlytype.CIRCLE，
google.maps.drawing.overlytype.RECTANGLE，
google.maps.drawing.overlytype.POLYGON
]
},
矩形选项：{
填充颜色：'#990000'，
不透明度：.4，
冲程重量：3，
strokeColor:“#999”，
可点击：正确，
是的，
zIndex:1
}
});
//将光标设置为矩形
draw.setDrawingMode（google.maps.drawing.OverlayType.RECTANGLE）；
//为已完成的覆盖添加侦听器，大部分工作在此处完成
google.maps.event.addListener（绘制'OverlyComplete'，函数（事件）{
draw.setDrawingMode（null）；//将光标放回手上
if（event.type==google.maps.drawing.overlytype.CIRCLE）{
//做点什么
}
if（event.type==google.maps.drawing.overlytype.POLYGON）{
//做点什么
}
if（event.type==google.maps.drawing.overlytype.RECTANGLE）{
//单击后，取消设置覆盖，并将光标切换回矩形
google.maps.event.addListener（event.overlay，'click'，function（）{
此.setMap（null）；
draw.setDrawingMode（google.maps.drawing.OverlayType.RECTANGLE）；
});
}
});
//初始化结束
draw.setMap（map）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
clickable:false