【技巧】谷歌地圖操作類

/********************************************************************************

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

        case 102:

            this._drawTool.setDrawingMode(google.maps.drawing.OverlayType.CIRCLE);

        case 103:

            this._drawTool.setDrawingMode(google.maps.drawing.OverlayType.MARKER);

        case 104:

            this._drawTool.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);

        default:

            this._drawTool.setDrawingMode(null);

};

方法：inactiveTool()

說明：禁用工具

GMap.prototype.inactiveTool = function () {

    this._drawTool.setDrawingMode(null);

方法：drawComplete()

說明：繪畫完成方法

callback：回調函數

GMap.prototype.drawComplete = function (callback) {

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

            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;

            case google.maps.drawing.OverlayType.MARKER: //103

                typeCode = 103;

                var pt = m.overlay.getPosition();

                // self.arrObj.push(m.overlay);

            case google.maps.drawing.OverlayType.POLYGON: //104

                typeCode = 104;

                //self.arrPolygon.push(m.overlay);

            default:

                return;

        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;

        case 'alarm':

            for (var i = 0; i < this._alarmMarker.length; ++i) {

                this.removeOverlay(this._alarmMarker[i]);

            this._alarmMarker.length = 0;

        case 'building':

            for (var i = 0; i < this._buildingMarker.length; ++i) {

                this.removeOverlay(this._buildingMarker[i]);

            this._buildingMarker.length = 0;

        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;

方法：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 () {

        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) {

            this._vehicleMarker.push(obj);

            this._alarmMarker.push(obj);

            this._buildingMarker.push(obj);

            this._labelMarker.push(obj);

            this._infobox.push(obj);

    //在地圖上顯示

    obj.setMap(this._map);

方法：removeOverlay()

說明：移除覆寫物

GMap.prototype.removeOverlay = function (obj) {

    obj.setMap(null);

方法：isOverlayExist()

說明：判斷覆寫物對象是否已經存在

Id:覆寫物ID

GMap.prototype.isOverlayExist = function (typeId, Id) {

    var result = false;

                if (Id == this._vehicleMarker[i].Id_) {

                    result = true;

                if (Id == this._alarmMarker[i].Id_) {

                if (Id == this._buildingMarker[i].Id_) {

                if (Id == this._labelMarker[i].Id_) {

                if (Id == this._infobox[i].Id_) {

    return result;

方法：getOverlay()

說明：擷取覆寫物對象

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];

                    }

            case 'alarm':

                for (var i = 0; i < this._alarmMarker.length; ++i) {

                    if (Id == this._alarmMarker[i].Id_) {

                        obj = this._alarmMarker[i];

            case 'building':

                for (var i = 0; i < this._buildingMarker.length; ++i) {

                    if (Id == this._buildingMarker[i].Id_) {

                        obj = this._buildingMarker[i];

            case 'label':

                for (var i = 0; i < this._labelMarker.length; ++i) {

                    if (Id == this._labelMarker[i].Id_) {

                        obj = this._labelMarker[i];

            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

obj:新覆寫物對象

GMap.prototype.updateOverlay = function (typeId, Id, obj) {

    var overlay = this.getOverlay(typeId, Id);

    this.removeOverlay(overlay);

                    this._vehicleMarker[i] = obj;

                    this._alarmMarker[i] = obj;

                    this._buildingMarker[i] = obj;

                    this._labelMarker[i] = obj;

                    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對象

參數:

GMap.prototype.updateInfowindow = function (htmlContent, latlng, bShow) {

    this._infowindow.setContent(htmlContent);

方法:showInfowindow()

說明：顯示資訊窗格

GMap.prototype.showInfowindow = function () {

    this._infowindow.open(this._map);