想google地图上添加一个可拖拽的矩形框

[huihuiworf]

刚刚将google地图显示在页面上，但是要在地图上实现一个可拖拽的矩形框，同时还得显示矩形的四个角的坐标。看了很多google map API 上得例子，没有合适的。望各位大侠，多多援手啊（本人刚刚接触google地图）、、、

[huihuiworf]

坐等大侠出现啊。

[hckxzy]

给矩形增加拖拽事件，每次拖拽改变矩形顶点坐标为鼠标位移

[hckxzy]

前段时间做的地图拉框查询，仅供参考
/*在地图上拖动鼠标画矩形方法
 * drawRectangleCallBack 为画矩形结束时回调函数
 * */
XMap.prototype.drawRectangle = function (drawRectangleCallBack){
	 //取消拉框放大缩小事件
	  this.cancelZoomExtEvent();
	  if(this.getDrawObject()&&this.getDrawObject()['object']){
	  		this.getDrawObject()['object'].setMap(null);
	  		delete this.getDrawObject()['object'];
	  }
	  var xMap = this;
	  var rectangle = null;
	  xMap.map.draggable = false;
	  var mapMouseDownEvent = google.maps.event.addListener(xMap.map, 'mousedown', function(event) {
		  	var centerPoint = event.latLng;
		  	var latLngBounds =  new google.maps.LatLngBounds(centerPoint,centerPoint);
		  	 rectangle= new google.maps.Rectangle({
		  											bounds:latLngBounds,
		  											fillColor: "#FF0000",
		  											fillOpacity: 0.35,
		  											strokeColor:'#FF0000',
		  											strokeOpacity: 0.8,
		  											strokeWeight: 2,
		  											draggable: true,
		  											map:xMap.map});
		  	  var  mapMouseMoveEvent = google.maps.event.addListener(xMap.map, 'mousemove', function(event1) {
				  	var latLngBoundsTemp =  new google.maps.LatLngBounds(centerPoint,event1.latLng);
				  	rectangle.setBounds(latLngBoundsTemp);
	  		   });
	  		  var circleMouseMoveEvent =  google.maps.event.addListener(rectangle, 'mousemove', function(event) {
				  	var latLngBoundsTemp =  new google.maps.LatLngBounds(centerPoint,event.latLng);
				  	rectangle.setBounds(latLngBoundsTemp);
	  		   });
	  		  var mapMouseUpEvent = google.maps.event.addListener(xMap.map, 'mouseup', function(event) {
		   			if(mapMouseDownEvent){
		   				google.maps.event.removeListener(mapMouseDownEvent);
		   			}
				  	if(mapMouseMoveEvent){
				  		google.maps.event.removeListener(mapMouseMoveEvent);
				  	}
				  	if(circleMouseMoveEvent){
				  		google.maps.event.removeListener(circleMouseMoveEvent);
				  	}
				  	if(mapMouseUpEvent){
				  		google.maps.event.removeListener(mapMouseUpEvent);
				  	}
				  	if(rectangleMouseUpEvent){
				  		google.maps.event.removeListener(rectangleMouseUpEvent);
				  	}
				  	//确保地图mouseup 和对象mouseup 只执行一次
				  	if(!xMap.map.draggable){
				  		xMap.map.draggable = true;
				  		xMap.getDrawObject()['object'] = rectangle;
					  	if(drawRectangleCallBack){
					  		 drawRectangleCallBack();
					  	}else{
					  		alert('回调函数为空，请传入回调函数');
					  	}
				  	}
	  			}); 
	  			var rectangleMouseUpEvent = google.maps.event.addListener(rectangle, 'mouseup', function(event) {
		   			if(mapMouseDownEvent){
		   				google.maps.event.removeListener(mapMouseDownEvent);
		   			}
				  	if(mapMouseMoveEvent){
				  		google.maps.event.removeListener(mapMouseMoveEvent);
				  	}
				  	if(circleMouseMoveEvent){
				  		google.maps.event.removeListener(circleMouseMoveEvent);
				  	}
				  	if(mapMouseUpEvent){
				  		google.maps.event.removeListener(mapMouseUpEvent);
				  	} 
				  	if(rectangleMouseUpEvent){
				  		google.maps.event.removeListener(rectangleMouseUpEvent);
				  	}
				  	//确保地图mouseup 和对象mouseup 只执行一次
				  	if(!xMap.map.draggable){
				  		xMap.map.draggable = true;
				  		xMap.getDrawObject()['object'] = rectangle;
					  	if(drawRectangleCallBack){
					  		 drawRectangleCallBack();
					  	}else{
					  		alert('回调函数为空，请传入回调函数');
					  	}
				  	}
	  			});
	   });
}

[huihuiworf]

[Quote=引用 3 楼 hckxzy 的回复:]
JScript code

前段时间做的地图拉框查询，仅供参考
/*在地图上拖动鼠标画矩形方法
* drawRectangleCallBack 为画矩形结束时回调函数
* */
XMap.prototype.drawRectangle = function (drawRectangleCallBack){
//取消拉框放大缩小事件
this.cancelZ……
[/Quote]

别人强调要用V3版的，能合适吗？还有需要应用JS文件吗？我是直接一句代码
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

[huihuiworf]

大侠们，给点代码吧，最好能有个demo 啊。我以前没接触过google map 。。。

[huihuiworf]

有没有高人才出现？加分求Demo！

[hckxzy]

用v3在选择版本上应该没有问题，我没开发地图标绘就是用的V3版

[tuantuanyuyu]

大侠，你写的代码中的XMap是什么？

[飞奔的豆沙包]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>电子围栏</title> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function iniz(){ var myLatlng=new google.maps.LatLng(22.688815,114.2764789); var myOptions={ zoom:12, center:myLatlng, mapTypeId:google.maps.MapTypeId.ROADMAP } var map= new google.maps.Map(document.getElementById("map_canvas"),myOptions); //设置了标志 var marker = new google.maps.Marker({ position:myLatlng, map:map, title:"hello,world" }); //多边形 var rectangle=new google.maps.Rectangle(); var rectOptions={ strokeColor:"#ff0000", strokeOpacity:0.8, strokeWeight:2, fillColor:"#ff0000", fillOpacity:0.35, map:map, clickable:false, bounds:map.getBounds() }; var beginlatlng="";//记录起初点坐标 var endlatlng=""//记录结束点坐标<br /> var rectBounds=""; var SfClick=""; var SfMove=""; var ClickCount=0;//点击次数 SfClick=google.maps.event.addListener(map,'click',function(e){ var begin=e.latLng; ClickCount++; if(ClickCount==1){ SfMove=google.maps.event.addListener(map,"mousemove",function(e){ beginlatlng=begin; endlatlng=e.latLng; rectOptions.bounds = new google.maps.LatLngBounds(beginlatlng,endlatlng); rectOptions.map=map; rectangle.setOptions(rectOptions); }); }else{ google.maps.event.removeListener(SfMove); if(window.confirm("确定该电子围栏范围？")){ ClickCount=0; alert('起初坐标点'+beginlatlng+'\n介绍坐标点'+endlatlng); }else{ ClickCount=0; rectOptions.map=null; rectangle.setOptions(rectOptions); } } }); } </script> </head> <body onload="iniz()"> <div id="map_canvas" style="width:800px;height:600px"></div> </body> </html>