拼吾爱程序人生

首页»  JavaScript»  Google map api 标注 图层管理
cobra - 2009-5-24 6:48:00
google map api 标注是单个的增加到地图中，当地图中的标注很多并且多种数据类型时，就难以管理这些标注。api中没有对标注图层的相关定义，只有全局的叠加层的概念。如下：


enum GMapPane

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

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

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

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

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

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

图层类定义
  1.     //图层类
  2.         //name:图层名
  3.         //zoommax:图层的最大可见级别
  4.         //zoommin:图层的最小可见级别
  5.     Layer=function(name,zoommax,zoommin){
  6.         this.Name=name;
  7.         this.zoommax=19;
  8.         this.zoommin=0;
  9.         if (typeof(zoommax)!=="undefined")
  10.         {
  11.             this.zoommax=zoommax;
  12.         }
  13.         if (typeof(zoommin)!=="undefined")
  14.         {
  15.             this.zoommin=zoommin;
  16.         }

  18.         this.map=null;
  19.         this.display=false;
  20.         this.zoomdisplay=false;

  22.         this.markers={};

  24. }
复制代码
标注的增加和移除
  1.       //向图层增加一个标注
  2.     Layer.prototype.AddMarker=function(marker){
  3.         marker.guid=CreateGuid();
  4.         this.markers[marker.guid]=marker;   
  5.        
  6.         if (this.map!=null&&this.display)
  7.         {       
  8.             this.map.addOverlay(marker);
  9.         }
  10.     }
  11.     //移除图层中的一个标注
  12.     Layer.prototype.RemoveMarker=function(marker){
  13.         if (this.map!=null)
  14.         {
  15.             this.map.removeOverlay(marker);
  16.         }

  18.         delete this.markers[marker.guid];

  20. }
复制代码
图层的显示和隐藏
  1.     //将图层中的所有标注增加到地图中
  2.     Layer.prototype.Show=function(){
  3.         if (this.map!=null&&(!this.display))
  4.         {
  5.             if (this.IsInZoom(this.map.getZoom()))
  6.             {
  7.                 for(var k in this.markers){               
  8.                     this.map.addOverlay(this.markers[k]);
  9.                 }
  10.                 this.zoomdisplay=true;
  11.             }           
  12.             this.display=true;
  13.         }
  14.     }
  15.     //将图层中的所有标注移除地图
  16.     Layer.prototype.Hide=function(){
  17.         if (this.map!=null)
  18.         {
  19.             for(var k in this.markers){
  20.                 this.map.removeOverlay(this.markers[k]);
  21.             }
  22.         }

  24.         this.display=false;

  26. }
复制代码
图层管理代码：
  1.     //标注管理类
  2.     LayerManage=function(map){
  3.         this.layers={};
  4.         layers=this.layers;
  5.         this.map=map;
  6.         GEvent.addListener(map,'zoomend',function(oldLevel,newLevel){           
  7.             for(var k in layers){
  8.                 layers[k].UpdataZoom(newLevel);
  9.             }
  10.         });
  11.     }   
  12.     //增加一个图层
  13.     LayerManage.prototype.AddLayer=function(layer){
  14.         if (typeof(this.layers[layer.Name])!="undefined"&&this.layers[layer.Name]!=null){
  15.             alert('图层已存在!');
  16.                 return;
  17.         }       
  18.         this.layers[layer.Name]=layer;
  19.         this.layers[layer.Name].map=this.map;
  20.         this.layers[layer.Name].Show();
  21.     }
  22.     //移除一个图层
  23.     LayerManage.prototype.Removelayer=function(name){
  24.         if (typeof(this.layers[name])!="undefined"&&this.layers[name]!=null)
  25.         {
  26.             this.layers[name].Hide();
  27.             this.layers[name].map=null;
  28.             layer=this.layers[name];
  29.             delete this.layers[name];
  30.             return layer;
  31.         }       
  32.         return null;
  33.     }
  34.     //获取图层
  35.     LayerManage.prototype.GetLayer=function(name){
  36.         return this.layers[name];       
  37.     }
复制代码
以上为图层管理的主要代码。  （文/恶魔猎手）

DEMO下载：

附件: 下载地址
JavaScript栏目的最新浏览文章：
• 《JAVASCRIPT语言精髓与编程实践》PDF下载
• Pro JavaScript Design Patterns（Javascript设计模式）pdf下载
• Javascript多级菜单（二）
• Javascript滑动菜单（二）
• Javascript滑动菜单（一）
• 《JavaScript语言精粹》PDF
• 甘特图（Javascript实现） - SIcon Gantt Chart
• 纯JS实现截图
• Google Maps API离线开发包下载
• 让JavaScript画布变成Silverlight
• 脚本嵌入式抓取引擎
• JavaScript用canvas元素实现 2D 和 3D
• 简易而又灵活的Javascript拖拽框架（五）
• JSON进阶四-前后台交互之美
• JavaScript Testing Beginner's Guide
查看完整版本: Google map api 标注 图层管理
Powered by Discuz!NT Archiver 3.0.0
CopyRight © 2007-2010 Pin5i-Programming-Life