【技巧】谷歌地圖操作類

/********************************************************************************
Name:谷歌地圖操作類
Author:劉皓
Date:2012.8.13
Desc:該類封裝谷歌地圖的一些操作
version:1.0
*********************************************************************************/

///*一些全局常量*/
//var INIT_GOOGLE_ZOOM = 5;
//var INIT_GOOGLE_LAT = 39.915;
//var INIT_GOOGLE_LNG = 116.404;

function GMap(mapId/*地圖對象ID*/) {
    this._mapId = mapId; //地圖對象ID
    this._mapTypeId = 'GoogleMap'; //地圖類型ID

    //當前覆蓋物
    this._vehicleMarker = new Array();
    this._alarmMarker = new Array();
    this._buildingMarker = new Array();
    this._labelMarker = new Array();
    this._infobox = new Array();
    this._line = new Array();
    this._measureMarker = new Array();
    this._map = new Object(); //當前地圖對象
    this._infowindow = null; //當前信息窗格對象
    this._drawTool = new Object(); //繪制工具
}

/***********************************************map(地圖對象)***********************************************************/
/*
方法：init()
說明：初始化地圖對象。
參數：
conatiner: div容器
*/
GMap.prototype.init = function (container) {
    if (google == undefined || google == null || google.maps == null) {
        alert("地圖未能成功加載！");
        return;
    }
    var latlng = new google.maps.LatLng($.appConfig.map.lat, $.appConfig.map.lng);
    var myOptions =
            {
                zoom: $.appConfig.map.zoom,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true,
                overviewMapControl: true,
                streetViewControl:true
            };
    this._map = new google.maps.Map(document.getElementById(container), myOptions);

    return this._map;
}

/*
方法：initTool()
說明：加載地圖工具
*/
GMap.prototype.initTool = function () {
    var self = this;
    this._drawTool = new google.maps.drawing.DrawingManager({
        map: self._map,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
            //   google.maps.drawing.OverlayType.MARKER,
   google.maps.drawing.OverlayType.CIRCLE,
   google.maps.drawing.OverlayType.POLYLINE,
            //   google.maps.drawing.OverlayType.POLYGON,
            //   google.maps.drawing.OverlayType.RECTANGLE
  ]
        }
    });
}

/*
方法：activeTool()
說明：激活地圖工具
參數說明：
toolCode: 地圖工具代碼
*/
GMap.prototype.activeTool = function (toolCode) {
    switch (toolCode) {
        case 100:
            this._drawTool.setDrawingMode(google.maps.drawing.OverlayType.POLYLINE);
            break;
        case 101:
            this._drawTool.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);
            break;
        case 102:
            this._drawTool.setDrawingMode(google.maps.drawing.OverlayType.CIRCLE);
            break;
        case 103:
            this._drawTool.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
            break;
        case 104:
            this._drawTool.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
            break;
        default:
            this._drawTool.setDrawingMode(null);
            break;
    }
};

/*
方法：inactiveTool()
說明：禁用工具
*/
GMap.prototype.inactiveTool = function () {
    this._drawTool.setDrawingMode(null);
}

/*
方法：drawComplete()
說明：繪畫完成方法
參數說明：
callback：回調函數
*/
GMap.prototype.drawComplete = function (callback) {
    var self = this;
    google.maps.event.addListener(self._drawTool, "overlaycomplete", function (m) {
        var typeCode = 0;
        var radius = 0; // only valid for circle
        var strPoints = '';
        var length = 0; //距離
        var overlay = new Object();
        switch (m.type) {
            case google.maps.drawing.OverlayType.POLYLINE: //100
                typeCode = 100;
                var paths = m.overlay.getPath();
                length = google.maps.geometry.spherical.computeLength(paths);
                length = length / 1000; //轉換為KM
                for (var i = 0; i < paths.length; i++) {
                    strPoints += paths.getAt(i).lng() + ',' + paths.getAt(i).lat() + ',';
                }
                //self.arrLine.push(m.overlay);
                self._measureMarker.push(m.overlay);
                break;
            case google.maps.drawing.OverlayType.RECTANGLE: //101
                typeCode = 101;
                var bounds = m.overlay.getBounds();
                strPoints += bounds.getSouthWest().lng() + ',' + bounds.getSouthWest().lat() + ',';
                strPoints += bounds.getNorthEast().lng() + ',' + bounds.getNorthEast().lat() + ',';
                // self.arrRect.push(m.overlay);
                break;
            case google.maps.drawing.OverlayType.CIRCLE: //102
                typeCode = 102;
                radius = m.overlay.getRadius();
                var pt = m.overlay.getCenter();
                strPoints += pt.lng() + ',' + pt.lat() + ',';
                overlay = m.overlay;
                break;
            case google.maps.drawing.OverlayType.MARKER: //103
                typeCode = 103;
                var pt = m.overlay.getPosition();
                strPoints += pt.lng() + ',' + pt.lat() + ',';
                // self.arrObj.push(m.overlay);
                break;
            case google.maps.drawing.OverlayType.POLYGON: //104
                typeCode = 104;
                var paths = m.overlay.getPath();
                for (var i = 0; i < paths.length; i++) {
                    strPoints += paths.getAt(i).lng() + ',' + paths.getAt(i).lat() + ',';
                }
                //self.arrPolygon.push(m.overlay);
                break;
            default:
                return;
                break;
        }
        callback(typeCode, radius, strPoints, length.toFixed(3), overlay);
    });
}

/*
方法：drawCircle()
說明：畫圓
*/
GMap.prototype.drawCircle = function (lat, lng, radius) {
    var buildCircle;
    var populationOptions = {
        strokeColor: /*"#FF0000"*/"336699",
        strokeOpacity: 0.8,
        strokeWeight: 0,
        fillColor:  /*"#FF0000"*/"336699",
        fillOpacity: 0.10,
        map: this._map,
        center: new google.maps.LatLng(lat, lng),
        radius: radius
    };
    buildCircle = new google.maps.Circle(populationOptions);
    return buildCircle;
}

/*
方法:drawLine()
說明：畫線條
*/
GMap.prototype.drawLine = function (latlng1, latlng2) {
    var points = [latlng1, latlng2];
    var myPath = new google.maps.Polyline({
        path: points,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    // myPath.setMap(this._map);

    return myPath;
}

/*
方法：removeAllOverLays()
說明：清除地圖所有標記。
*/
GMap.prototype.removeAllOverLays = function () {
    this.removeOverlayByTypeId('vehicle');
    this.removeOverlayByTypeId('alarm');
    this.removeOverlayByTypeId('building');
    this.removeOverlayByTypeId('label');
    this.removeOverlayByTypeId('infobox');
    this.removeOverlayByTypeId('line');
}

/*
方法：removeOverlayByTypeId()
說明：根據覆蓋物類型ID清除標記。
參數：overlayTypeId
可選的值:
vehicle:車輛圖標
alarm:報警
building:建築
label:標簽圖標
infowindow:信息窗格
*/
GMap.prototype.removeOverlayByTypeId = function (overlayTypeId) {
    switch (overlayTypeId) {
        case 'vehicle':
            for (var i = 0; i < this._vehicleMarker.length; ++i) {
                this.removeOverlay(this._vehicleMarker[i]);
            }
            this._vehicleMarker.length = 0;
            break;
        case 'alarm':
            for (var i = 0; i < this._alarmMarker.length; ++i) {
                this.removeOverlay(this._alarmMarker[i]);
            }
            this._alarmMarker.length = 0;
            break;
        case 'building':
            for (var i = 0; i < this._buildingMarker.length; ++i) {
                this.removeOverlay(this._buildingMarker[i]);
            }
            this._buildingMarker.length = 0;
            break;
        case 'label':
            for (var i = 0; i < this._labelMarker.length; ++i) {
                this.removeOverlay(this._labelMarker[i]);
            }
            this._labelMarker.length = 0;
        case 'infobox':
            for (var i = 0; i < this._infobox.length; ++i) {
                this.removeOverlay(this._infobox[i]);
            }
            this._infobox.length = 0;
        case 'measure':
            for (var i = 0; i < this._measureMarker.length; ++i) {
                this.removeOverlay(this._measureMarker[i]);
            }
            this._measureMarker.length = 0;
        case 'line':
            for (var i = 0; i < this._line.length; ++i) {
                this.removeOverlay(this._line[i]);
            }
            this._line.length = 0;
            break;
        default:
            break;
    }
}

/*
方法：LatLng()
說明：構造一個經緯度對象
參數：
lat:維度
lng:經度
*/
GMap.prototype.LatLng = function (lat, lng) {
    return new google.maps.LatLng(lat, lng);
}

/*****************************************************map.base(核心方法)***************************************************/
/*
方法：setZoom()
說明：設置級別。
參數：
level 級別
*/
GMap.prototype.setZoom = function (level) {
    this._map.setZoom(level);
}

/*
方法:getZoom()
說明：獲取級別。
返回值:number
*/
GMap.prototype.getZoom = function () {
    return this._map.getZoom();
}

/*
方法：zoomIn()
說明：放大
*/
GMap.prototype.zoomIn = function () {
    this.setZoom(this._map.getZoom() + 1);
}

/*
方法：zoomOut()
說明：縮小
*/
GMap.prototype.zoomOut = function () {
    this.setZoom(this._map.getZoom() - 1);
}

/*
方法：setCenter()
說明：設置中心點
*/
GMap.prototype.setCenter = function (latlng) {
    this._map.setCenter(latlng);
}

/*
方法：panTo()
說明：移動到
*/
GMap.prototype.panTo = function (latlng) {
    this._map.panTo(latlng);
}

/*
方法：getBounds()
說明: 獲取地圖邊界
返回值:LatLngBounds
說明：LatLngBounds包含了地圖西南和東北的經緯度，其包含的相關重要的方法：
contains(latlng)：是否包含某個點
extend(latlng)：擴展邊界以包含某個點
getNorthEast()：獲取地圖東北角的經緯度
getSouthWest()：獲取地圖西南角的經緯度
*/
GMap.prototype.getBounds = function () {
    return this._map.getBounds();
}

/*
方法：isInBounds()
說明：是否在邊界內
參數：經度緯度
*/
GMap.prototype.isInBounds = function (latlng) {
    return this.getBounds().contains(latlng);
}

/*
方法：panToBounds()
說明：調整地圖視角
參數：LatLngBounds對象
*/
GMap.prototype.panToBounds = function (latlngBounds) {
    this._map.panToBounds(latlngBounds);
}

/*
方法：LatLngBounds()
說明：構造一個邊界對象
參數說明：
sw：西南坐標點
ne：東北坐標點
*/
GMap.prototype.LatLngBounds = function (sw, ne) {
    return new google.maps.LatLngBounds(sw, ne);
}

/*
方法：fitBounds()
說明：調整邊界視角
參數說明:
latlngBounds：地圖邊界對象
*/
GMap.prototype.fitBounds = function (latlngBounds) {
    this._map.fitBounds(latlngBounds);
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/**************************************************用戶自定義覆蓋物*************************************************/
/*
Google Maps API 第 3 版提供了用於創建自定義疊加層的 OverlayView 類。OverlayView 是一個基類，提供了您在創建疊加層時必須實現的若干方法。
要創建自定義疊加層，請執行以下操作：
•將自定義對象的 prototype 設置為 google.maps.OverlayView() 的新實例。這可以有效地實現疊加層類的“子類化”。
•為自定義疊加層創建構造函數，並將該構造函數中的所有初始化參數都設置為自定義屬性。
•在原型中實現 onAdd() 方法，以將疊加層附加到地圖上。當地圖准備好附加疊加層后，系統將會調用 OverlayView.onAdd()。
•在原型中實現 draw() 方法，以處理對象的視覺顯示。同樣，在對象首次顯示后，系統將會調用 OverlayView.draw()。
•您還應當實現 onRemove() 方法，以清理在疊加層中添加的所有元素。
*/

function USGSOverlay(htmlObj/*DOM對象*/
                   , latlng/*中心點*/
                   , offset/*可選參數，相對於中心點偏移量*/
                   , typeId/*可選參數，覆蓋物類型ID*/
                   , Id/*可選參數，覆蓋物ID*/
                   ) {
    this.latlng_ = latlng;
    this.htmlObj_ = htmlObj;
    this.offset_ = offset;
    this.typeId_ = typeId;
    this.Id_ = Id;
}

USGSOverlay.prototype = new google.maps.OverlayView();

USGSOverlay.prototype.draw = function () {
    var overlayProjection = this.getProjection();
    var sw = overlayProjection.fromLatLngToDivPixel(this.latlng_);
    var div = this.htmlObj_;
    if (this.offset_ != undefined && this.offset_ != null) {
        div.style.left = sw.x + this.offset_.x + 'px';
        div.style.top = sw.y + this.offset_.y + 'px';
    }
    else {
        div.style.left = sw.x + 'px';
        div.style.top = sw.y + 'px';
    }
}

USGSOverlay.prototype.onAdd = function () {
    var panes = this.getPanes();
    // panes.overlayLayer.appendChild(this.htmlObj_);
    panes.overlayMouseTarget.appendChild(this.htmlObj_);
}

USGSOverlay.prototype.onRemove = function () {
    this.htmlObj_.parentNode.removeChild(this.htmlObj_);
    this.htmlObj_ = null;
}

USGSOverlay.prototype.hide = function () {
    if (this.htmlObj_) {
        this.htmlObj_.style.visibility = "hidden";
    }
}

USGSOverlay.prototype.show = function () {
    if (this.htmlObj_) {
        this.htmlObj_.style.visibility = "visible";
    }
}

//旋轉：兼容各種瀏覽器
USGSOverlay.prototype.rotate = function (deg) {
    var obj = this.htmlObj_.children[0];

    /*---------------------IE-------------------*/
    var r, sin, cos;
    deg = deg % 360;
    r = deg / (360 / (Math.PI * 2));
    sin = Math.sin(r), cos = Math.cos(r);
    var temp = -sin;
    obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix"
          + "("
          + "enabled=true,"
          + "sizingmethod='auto expand',"
          + "FilterType=bilinear,"
          + "M11=" + cos + ","
          + "M12=" + temp + ","
          + "M21=" + sin + ","
          + "M22=" + cos
          + ")";

    var width = obj.style.width;
    obj.style.left = width / 2 - obj.offsetWidth / 2;
    obj.style.top = width / 2 - obj.offsetHeight / 2;

    obj.style['transform'] = "rotate(" + deg + "deg);";
    /* ---Webkit Kernel browser---- */
    obj.style['-webkit-transform'] = "rotate(" + deg + "deg)";
    /*-----Firefox----- */
    obj.style['-moz-transform'] = "rotate(" + deg + "deg)";
    /*---Opera---*/
    obj.style['-o-transform'] = "rotate(" + deg + "deg)";
}

//綁定事件
USGSOverlay.prototype.bind = function (eventname, callback) {
    google.maps.event.addDomListener(this.htmlObj_, eventname, callback);
    //google.maps.event.addListener(this, eventname, callback);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/***********************************************map.overlays(覆蓋物)************************************************/
/*
方法：addOverlay()
說明：添加覆蓋物。
參數說明：
typeId:覆蓋物類型ID
obj:覆蓋物對象，可以是標准的覆蓋物對象，也可以是自定義覆蓋物對象。如何創建自定義覆蓋物，請參考“用戶自定義覆蓋物”。
*/
GMap.prototype.addOverlay = function (typeId, obj) {
    //添加到數組中管理
    switch (typeId) {
        case 'vehicle':
            this._vehicleMarker.push(obj);
            break;
        case 'alarm':
            this._alarmMarker.push(obj);
            break;
        case 'building':
            this._buildingMarker.push(obj);
            break;
        case 'label':
            this._labelMarker.push(obj);
            break;
        case 'infobox':
            this._infobox.push(obj);
            break;
        default:
            break;
    }

    //在地圖上顯示
    obj.setMap(this._map);
}

/*
方法：removeOverlay()
說明：移除覆蓋物
參數說明：
obj:覆蓋物對象，可以是標准的覆蓋物對象，也可以是自定義覆蓋物對象。如何創建自定義覆蓋物，請參考“用戶自定義覆蓋物”。
*/
GMap.prototype.removeOverlay = function (obj) {
    obj.setMap(null);
}

/*
方法：isOverlayExist()
說明：判斷覆蓋物對象是否已經存在
參數說明：
typeId:覆蓋物類型ID
Id:覆蓋物ID
*/
GMap.prototype.isOverlayExist = function (typeId, Id) {
    var result = false;

    switch (typeId) {
        case 'vehicle':
            for (var i = 0; i < this._vehicleMarker.length; ++i) {
                if (Id == this._vehicleMarker[i].Id_) {
                    result = true;
                }
            }
            break;
        case 'alarm':
            for (var i = 0; i < this._alarmMarker.length; ++i) {
                if (Id == this._alarmMarker[i].Id_) {
                    result = true;
                }
            }
            break;
        case 'building':
            for (var i = 0; i < this._buildingMarker.length; ++i) {
                if (Id == this._buildingMarker[i].Id_) {
                    result = true;
                }
            }
            break;
        case 'label':
            for (var i = 0; i < this._labelMarker.length; ++i) {
                if (Id == this._labelMarker[i].Id_) {
                    result = true;
                }
            }
            break;
        case 'infobox':
            for (var i = 0; i < this._infobox.length; ++i) {
                if (Id == this._infobox[i].Id_) {
                    result = true;
                }
            }
            break;
        default:
            break;
    }

    return result;
}

/*
方法：getOverlay()
說明：獲取覆蓋物對象
參數說明：
typeId:覆蓋物類型ID
Id:覆蓋物ID
*/
GMap.prototype.getOverlay = function (typeId, Id) {
    var obj = null;

    if (this.isOverlayExist(typeId, Id)) {
        switch (typeId) {
            case 'vehicle':
                for (var i = 0; i < this._vehicleMarker.length; ++i) {
                    if (Id == this._vehicleMarker[i].Id_) {
                        obj = this._vehicleMarker[i];
                    }
                }
                break;
            case 'alarm':
                for (var i = 0; i < this._alarmMarker.length; ++i) {
                    if (Id == this._alarmMarker[i].Id_) {
                        obj = this._alarmMarker[i];
                    }
                }
                break;
            case 'building':
                for (var i = 0; i < this._buildingMarker.length; ++i) {
                    if (Id == this._buildingMarker[i].Id_) {
                        obj = this._buildingMarker[i];
                    }
                }
                break;
            case 'label':
                for (var i = 0; i < this._labelMarker.length; ++i) {
                    if (Id == this._labelMarker[i].Id_) {
                        obj = this._labelMarker[i];
                    }
                }
                break;
            case 'infobox':
                for (var i = 0; i < this._infobox.length; ++i) {
                    if (Id == this._infobox[i].Id_) {
                        obj = this._infobox;
                    }
                }
        }
    }

    return obj;
}

/*
方法:updateOverlay()
說明:更新覆蓋物
參數：
typeId:類型ID
Id:覆蓋物ID
obj:新覆蓋物對象
*/
GMap.prototype.updateOverlay = function (typeId, Id, obj) {
    var overlay = this.getOverlay(typeId, Id);
    this.removeOverlay(overlay);

    switch (typeId) {
        case 'vehicle':
            for (var i = 0; i < this._vehicleMarker.length; ++i) {
                if (Id == this._vehicleMarker[i].Id_) {
                    this._vehicleMarker[i] = obj;
                }
            }
            break;
        case 'alarm':
            for (var i = 0; i < this._alarmMarker.length; ++i) {
                if (Id == this._alarmMarker[i].Id_) {
                    this._alarmMarker[i] = obj;
                }
            }
            break;
        case 'building':
            for (var i = 0; i < this._buildingMarker.length; ++i) {
                if (Id == this._buildingMarker[i].Id_) {
                    this._buildingMarker[i] = obj;
                }
            }
            break;
        case 'label':
            for (var i = 0; i < this._labelMarker.length; ++i) {
                if (Id == this._labelMarker[i].Id_) {
                    this._labelMarker[i] = obj;
                }
            }
            break;
        case 'infobox':
            for (var i = 0; i < this._infobox.length; ++i) {
                if (Id == this._infobox[i].Id_) {
                    this._infobox = obj;
                }
            }
    }

    this.addOverlay(typeId, obj);
}

/********************************************信息窗格*******************************************/
/*
方法:createInfowindow()
說明：創建一個infowindow對象，並顯示
參數：
htmlContent:html內容
latlng:經度緯度
bShow:是否立即顯示
*/
GMap.prototype.createInfowindow = function (htmlContent, latlng, bShow) {
    this._infowindow = new google.maps.InfoWindow({ content: htmlContent });
    this._infowindow.setPosition(latlng);

    if (bShow) {
        this._infowindow.open(this._map);
    }
}

/*
方法:updateInfowindow()
說明:修改infowindow對象
參數:
htmlContent:html內容
latlng:經度緯度
bShow:是否立即顯示
*/
GMap.prototype.updateInfowindow = function (htmlContent, latlng, bShow) {
    this._infowindow.setContent(htmlContent);
    this._infowindow.setPosition(latlng);

    if (bShow) {
        this._infowindow.open(this._map);
    }
}

/*
方法:showInfowindow()
說明：顯示信息窗格
*/
GMap.prototype.showInfowindow = function () {
    this._infowindow.open(this._map);
}