Google map api 标注 图层管理(原创)

google map api 标注是单个的增加到地图中，当地图中的标注很多并且多种数据类型时，就难以管理这些标注。api中没有对标注图层的相关定义，只有全局的叠加层的概念。如下：

enum GMapPane

这些常数定义叠加层用来在地图上显示自身的分层系统。图标、阴影、信息窗口、信息窗口上的阴影和捕获对象的透明鼠标事件都有不同的层。

 由此可看出叠加层不是用来做标注的图层管理用的。

所以就自己实现了一个Google map 图层管理。来方便自己项目功能的开发。实现在地图上同时显示不同类型的数据和数据的管理

图层管理由两个类组成，Layer和LayerManage。

Layer完成标注的增加和移除，定义图层的可见级别，显示和隐藏图层。

LayerManage：向地图增加移除图层，获取图层。

图层类定义

    //图层类
        //name:图层名
        //zoommax:图层的最大可见级别
        //zoommin:图层的最小可见级别
    Layer=function(name,zoommax,zoommin){
        this.Name=name;
        this.zoommax=19;
        this.zoommin=0;
        if (typeof(zoommax)!=="undefined")
        {
            this.zoommax=zoommax;
        }
        if (typeof(zoommin)!=="undefined")
        {
            this.zoommin=zoommin;
        }

        this.map=null;
        this.display=false;
        this.zoomdisplay=false;

        this.markers={};

}

 

标注的增加和移除

       //向图层增加一个标注
    Layer.prototype.AddMarker=function(marker){
        marker.guid=CreateGuid();
        this.markers[marker.guid]=marker;    
        
        if (this.map!=null&&this.display)
        {        
            this.map.addOverlay(marker);
        }
    }
    //移除图层中的一个标注
    Layer.prototype.RemoveMarker=function(marker){
        if (this.map!=null)
        {
            this.map.removeOverlay(marker);
        }

        delete this.markers[marker.guid];

} 

 图层的显示和隐藏

    //将图层中的所有标注增加到地图中
    Layer.prototype.Show=function(){
        if (this.map!=null&&(!this.display))
        {
            if (this.IsInZoom(this.map.getZoom()))
            {
                for(var k in this.markers){                
                    this.map.addOverlay(this.markers[k]);
                }
                this.zoomdisplay=true;
            }            
            this.display=true;
        }
    }
    //将图层中的所有标注移除地图
    Layer.prototype.Hide=function(){
        if (this.map!=null)
        {
            for(var k in this.markers){
                this.map.removeOverlay(this.markers[k]);
            }
        }

        this.display=false;

}

 

 图层管理代码：

 

    //标注管理类
    LayerManage=function(map){
        this.layers={};
        layers=this.layers;
        this.map=map;
        GEvent.addListener(map,'zoomend',function(oldLevel,newLevel){            
            for(var k in layers){
                layers[k].UpdataZoom(newLevel);
            }
        });
    }    
    //增加一个图层
    LayerManage.prototype.AddLayer=function(layer){
        if (typeof(this.layers[layer.Name])!="undefined"&&this.layers[layer.Name]!=null){
            alert('图层已存在!');
                return;
        }        
        this.layers[layer.Name]=layer;
        this.layers[layer.Name].map=this.map;
        this.layers[layer.Name].Show();
    }
    //移除一个图层
    LayerManage.prototype.Removelayer=function(name){
        if (typeof(this.layers[name])!="undefined"&&this.layers[name]!=null)
        {
            this.layers[name].Hide();
            this.layers[name].map=null;
            layer=this.layers[name];
            delete this.layers[name];
            return layer;
        }        
        return null;
    }
    //获取图层
    LayerManage.prototype.GetLayer=function(name){
        return this.layers[name];        
    }

 

 以上为图层管理的主要代码。

 Google map 图层管理demo