GoogleMapsV3-----基础地图(新建带标记带窗口可移动的圆,矩形,多边形)
2013-01-24 09:28
344 查看
function fenceObj(fence, fenceType, information, marker, lable) { this.fence = fence this.fenceType = fenceType this.information = information this.marker = marker this.lable = lable } var fenceObjArray = []; //============================================================================================ //fenceObjArray.push(AddCircle(。。。。。。。。。)); //fenceObjArray.push(AddRectangular(。。。。。。。。。)); //fenceObjArray.push(AddPolygon(。。。。。。。。。)); //============================================================================================ //【新lable】 //============================================================================================ function NewLable(latlng, title, map) { function LabelMarker(latlng, text, map) { this.latlng_ = latlng; this.text_ = text; this.map_ = map; this.div_ = null; this.setMap(map); } LabelMarker.prototype = new google.maps.OverlayView(); LabelMarker.prototype.onAdd = function () { var div = document.createElement('DIV'); div.style.border = "none"; div.style.borderWidth = "0px"; div.style.position = "absolute"; div.innerHTML = this.text_; this.div_ = div; var panes = this.getPanes(); // panes.floatPane.appendChild(div);; panes.floatPane.appendChild(div); } LabelMarker.prototype.draw = function () { var overlayProjection = this.getProjection(); var position = overlayProjection.fromLatLngToDivPixel(this.latlng_); var div = this.div_; div.style.left = position.x + 'px'; div.style.top = position.y + 'px'; } LabelMarker.prototype.onRemove = function () { this.div_.parentNode.removeChild(this.div_); this.div_ = null; } LabelMarker.prototype.getTitle = function () { if (this.text_) { return this.text_; } } return new LabelMarker(latlng, title, map); } //【新建圆】 //============================================================================================ function AddCircle(center, radius, map, text, title, fenceObjArray_) { var newCircleAttribute = { strokeColor: "#6f77ff", strokeOpacity: 0.5, strokeWeight: 2, fillColor: "#4a85ff", fillOpacity: 0.3, editable: true, map: map, center: center, radius: radius }; var newCircle = new google.maps.Circle(newCircleAttribute); var newCircleinFowindow = newCircleinFowindow = new google.maps.InfoWindow({ content: text, position: center }); google.maps.event.addDomListener(newCircle, 'click', function (event) { for (var fenceObjArray_i = 0; fenceObjArray_i < fenceObjArray_.length; fenceObjArray_i++) { if (newCircle == fenceObjArray_[fenceObjArray_i].fence) { fenceObjArray_[fenceObjArray_i].information.setPosition(fenceObjArray_[fenceObjArray_i].fence.getCenter()); if (x != null) { x.close(); x.setMap(null); x = null; } x = fenceObjArray_[fenceObjArray_i].information; x.open(map); setTimeout("latlngToAddress('" + x.getPosition().lat() + "," + x.getPosition().lng() + "')", 500); break; } } }); var mylable = new NewLable(center, title, map); google.maps.event.addListener(newCircle, 'center_changed', function () { for (var fenceObjArray_j = 0; fenceObjArray_j < fenceObjArray_.length; fenceObjArray_j++) { if (newCircle == fenceObjArray_[fenceObjArray_j].fence) { var myTitle = fenceObjArray_[fenceObjArray_j].lable.getTitle(); fenceObjArray_[fenceObjArray_j].lable.setMap(null); fenceObjArray_[fenceObjArray_j].lable = new NewLable(newCircle.getCenter(), myTitle, map); } } }); map.fitBounds(newCircle.getBounds()); return new fenceObj(newCircle, "圆形", newCircleinFowindow, null, mylable); } //【矩形Bounds处理】 //============================================================================================ function RectangularBoundsProcessing(coordinate1, coordinate2) { var myNorthEast = null; var mySouthWest = null; var maxRectangularLat = coordinate1.lat(); var maxRectangularLng = coordinate1.lng(); var minRectangularLat = coordinate1.lat(); var minRectangularLng = coordinate1.lng(); if (coordinate2.lat() > maxRectangularLat) { maxRectangularLat = coordinate2.lat(); } if (coordinate2.lng() > maxRectangularLng) { maxRectangularLng = coordinate2.lng(); } if (coordinate2.lat() < minRectangularLat) { minRectangularLat = coordinate2.lat(); } if (coordinate2.lng() < minRectangularLng) { minRectangularLng = coordinate2.lng(); } myNorthEast = new google.maps.LatLng(maxRectangularLat, minRectangularLng); mySouthWest = new google.maps.LatLng(minRectangularLat, maxRectangularLng); var myBounds = new google.maps.LatLngBounds(myNorthEast, mySouthWest); return myBounds; } //【新建矩形】 //============================================================================================ function AddRectangular(bounds, map, text, title, fenceObjArray_) { var newRectangularAttribute = { strokeColor: "#6f77ff", strokeOpacity: 0.5, strokeWeight: 2, fillColor: "#4a85ff", fillOpacity: 0.3, editable: true, map: map, bounds: bounds }; var newRectangular = new google.maps.Rectangle(newRectangularAttribute); var newRectangularFowindow = new google.maps.InfoWindow({ content: text, position: bounds.getCenter() }); google.maps.event.addDomListener(newRectangular, 'click', function (event) { for (var fenceObjArray_i = 0; fenceObjArray_i < fenceObjArray_.length; fenceObjArray_i++) { if (newRectangular == fenceObjArray_[fenceObjArray_i].fence) { if (x != null) { x.close(); x.setMap(null); x = null; } x = fenceObjArray_[fenceObjArray_i].information; x.open(map); setTimeout("latlngToAddress('" + x.getPosition().lat() + "," + x.getPosition().lng() + "')", 500); break; } } }); var marker = new google.maps.Marker({ icon: "../images/mobilePointMark.png", position: bounds.getCenter(), map: map, draggable: true }); var mylable = new NewLable(bounds.getCenter(), title, map); google.maps.event.addDomListener(marker, 'mouseup', function (event) { for (var fenceObjArray_j = 0; fenceObjArray_j < fenceObjArray_.length; fenceObjArray_j++) { if (marker == fenceObjArray_[fenceObjArray_j].marker) { var movementRangeLat = event.latLng.lat() - fenceObjArray_[fenceObjArray_j].fence.getBounds().getCenter().lat(); var movementRangeLng = event.latLng.lng() - fenceObjArray_[fenceObjArray_j].fence.getBounds().getCenter().lng(); fenceObjArray_[fenceObjArray_j].fence.setBounds(new google.maps.LatLngBounds(new google.maps.LatLng(fenceObjArray_[fenceObjArray_j].fence.getBounds().getSouthWest().lat() + movementRangeLat, fenceObjArray_[fenceObjArray_j].fence.getBounds().getSouthWest().lng() + movementRangeLng), new google.maps.LatLng(fenceObjArray_[fenceObjArray_j].fence.getBounds().getNorthEast().lat() + movementRangeLat, fenceObjArray_[fenceObjArray_j].fence.getBounds().getNorthEast().lng() + movementRangeLng))); fenceObjArray_[fenceObjArray_j].information.setPosition(new google.maps.LatLngBounds(new google.maps.LatLng(fenceObjArray_[fenceObjArray_j].fence.getBounds().getSouthWest().lat(), fenceObjArray_[fenceObjArray_j].fence.getBounds().getSouthWest().lng()), new google.maps.LatLng(fenceObjArray_[fenceObjArray_j].fence.getBounds().getNorthEast().lat(), fenceObjArray_[fenceObjArray_j].fence.getBounds().getNorthEast().lng())).getCenter()); var myTitle = fenceObjArray_[fenceObjArray_j].lable.getTitle(); fenceObjArray_[fenceObjArray_j].lable.setMap(null); fenceObjArray_[fenceObjArray_j].lable = new NewLable(event.latLng, myTitle, map); break; } } }); map.fitBounds(bounds); return new fenceObj(newRectangular, "矩形", newRectangularFowindow, marker, mylable); } //【多边形Bounds处理】 //============================================================================================ function PolygonBoundaryTreatment(pointArray) { var minX = pointArray[0].lng(); var maxY = pointArray[0].lat(); var maxX = pointArray[0].lng(); var minY = pointArray[0].lat(); for (var minAndMax_i = 1; minAndMax_i < pointArray.length; minAndMax_i++) { if (minX > pointArray[minAndMax_i].lng()) { minX = pointArray[minAndMax_i].lng(); } if (maxY < pointArray[minAndMax_i].lat()) { maxY = pointArray[minAndMax_i].lat(); } if (maxX < pointArray[minAndMax_i].lng()) { maxX = pointArray[minAndMax_i].lng(); } if (minY > pointArray[minAndMax_i].lat()) { minY = pointArray[minAndMax_i].lat(); } } var myBounds = new google.maps.LatLngBounds(new google.maps.LatLng(maxY, minX), new google.maps.LatLng(minY, maxX)); return myBounds; } //【新建多边形】 //============================================================================================ function AddPolygon(pointArray, map, text, title, fenceObjArray_) { var newPolygonAttribute = { strokeColor: "#6f77ff", strokeOpacity: 0.5, strokeWeight: 2, fillColor: "#4a85ff", fillOpacity: 0.3, editable: true, map: map, paths: pointArray }; var newPolygon = new google.maps.Polygon(newPolygonAttribute); var newPolygonFowindow = new google.maps.InfoWindow({ content: text, position: PolygonBoundaryTreatment(pointArray).getCenter() }); google.maps.event.addDomListener(newPolygon, 'click', function (event) { for (var fenceObjArray_i = 0; fenceObjArray_i < fenceObjArray_.length; fenceObjArray_i++) { if (newPolygon == fenceObjArray_[fenceObjArray_i].fence) { if (x != null) { x.close(); x.setMap(null); x = null; } x = fenceObjArray_[fenceObjArray_i].information; x.open(map); setTimeout("latlngToAddress('" + x.getPosition().lat() + "," + x.getPosition().lng() + "')", 500); break; } } }); var marker = new google.maps.Marker({ icon: "../images/mobilePointMark.png", position: PolygonBoundaryTreatment(pointArray).getCenter(), map: map, draggable: true }); var mylable = new NewLable(PolygonBoundaryTreatment(pointArray).getCenter(), title, map); google.maps.event.addDomListener(marker, 'mouseup', function (event) { for (var fenceObjArray_j = 0; fenceObjArray_j < fenceObjArray_.length; fenceObjArray_j++) { if (marker == fenceObjArray_[fenceObjArray_j].marker) { var movementRangeLat = event.latLng.lat() - PolygonBoundaryTreatment(fenceObjArray_[fenceObjArray_j].fence.getPath().getArray()).getCenter().lat(); var movementRangeLng = event.latLng.lng() - PolygonBoundaryTreatment(fenceObjArray_[fenceObjArray_j].fence.getPath().getArray()).getCenter().lng(); var movementRangeArray = []; for (var movementRangeArray_i = 0; movementRangeArray_i < fenceObjArray_[fenceObjArray_j].fence.getPath().getArray().length; movementRangeArray_i++) { movementRangeArray.push(new google.maps.LatLng(fenceObjArray_[fenceObjArray_j].fence.getPath().getArray()[movementRangeArray_i].lat() + movementRangeLat, fenceObjArray_[fenceObjArray_j].fence.getPath().getArray()[movementRangeArray_i].lng() + movementRangeLng)); } fenceObjArray_[fenceObjArray_j].fence.setPath(movementRangeArray); fenceObjArray_[fenceObjArray_j].information.setPosition(PolygonBoundaryTreatment(movementRangeArray).getCenter()); var myTitle = fenceObjArray_[fenceObjArray_j].lable.getTitle(); fenceObjArray_[fenceObjArray_j].lable.setMap(null); fenceObjArray_[fenceObjArray_j].lable = new NewLable(event.latLng, myTitle, map); break; } } }); map.fitBounds(PolygonBoundaryTreatment(pointArray)); return new fenceObj(newPolygon, "多边形", newPolygonFowindow, marker, mylable); }
相关文章推荐
- GoogleMapsV3-----基础地图(鼠标移动画矩形)
- qt creator在原窗口基础上新建窗口,inpaint例子的修改
- Google Map API v2 (三)----- 地图上添加标记(Marker),标记info窗口,即指定经纬度获取地址字符串
- Google Maps API指南:地图标记与信息窗口
- Python3 Tkinter基础 Canvas 使用coords移动一条直线,itemconfig设置矩形的颜色,delete删除一条直线
- html基础 href标记 #:普通空链接 js链接-关闭窗口
- javascript基础:window对象的screen属性、移动窗口、缩放窗口
- 移动应用地图工具包WhirlyGlobe-Maply新建android项目
- html基础 href标记 #:普通空链接 js链接-关闭窗口
- Java基础之在窗口中绘图——绘制直线和矩形(Sketcher 2 drawing lines and rectangles)
- 超图使用javascript在地图上标记点,点击时并弹出窗口
- GOOGLE 地图,查询地名,移动标记,生成静态地图
- 窗口的新建移动和改变大小
- google map上实现通过点击地图任意点进行标记并形成多边形
- GoogleMapsV3-----基础地图(坐标地址转换)
- html基础 href标记 在新的窗口中打开新的链接 以相对路径打开上一级文件夹中的文件
- GoogleMapsV3-----基础地图(自定义消息提示OverlayView)
- html基础 href标记 在新的窗口中打开新的链接 以相对路径打开上一级文件夹中的文件
- 百度地图开发------基础地图篇------缩放空间和比例尺控件移动位置无效问题
- GoogleMapsV3-----基础地图(右键菜单)