刚刚将google地图显示在页面上，但是要在地图上实现一个可拖拽的矩形框，同时还得显示矩形的四个角的坐标。看了很多google map API 上得例子，没有合适的。望各位大侠，多多援手啊（本人刚刚接触google地图）、、、
------解决方案--------------------
- JScript code
前段时间做的地图拉框查询，仅供参考
/*在地图上拖动鼠标画矩形方法
* 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('回调函数为空，请传入回调函数');
}
}
});
});
}