读书人

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

发布时间: 2012-03-25 20:55:16 作者: rapoo

想google地图上添加一个可拖拽的矩形框
刚刚将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('回调函数为空,请传入回调函数');                          }                      }                  });       });} 


[解决办法]
用v3在选择版本上应该没有问题,我没开发地图标绘就是用的V3版

读书人网 >JavaScript

热点推荐