鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > 网络技术 > 网络综合 > >

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

来源:互联网 作者:佚名 时间:2015-10-09 08:18
google map api 标注是单个的增加到地图中,当地图中的标注很多并且多种数据类型时,就难以管理这些标注。api中没有对标注图层的相关定义,只有全局的叠加层的概念。如下: enum GMapPane 这些常数定义叠加层用来在地图上显示自身的分层系统。图标、阴影、信

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

enum GMapPane

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

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

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

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

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

LayerManage:向地图增加移除图层,获取图层。

图层类定义

Code
    //图层类
        //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={};

}

 

标注的增加和移除

Code
       //向图层增加一个标注
    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];

 图层的显示和隐藏

Code
    //将图层中的所有标注增加到地图中
    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;

}

 

 图层管理代码:

 

Code
    //标注管理类
    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

网友评论
<