GoogleMapsV3-----基础地图(新建带标记带窗口可移动的圆,矩形,多边形)

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);
        }


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值