K_ReverterMap2.0（是K_Reverter在Google Maps API2.0）

 

    K_ReverterMap2.0是K_Reverter在Google Maps API2.0的基础上进行地图开发的时候得到的一些Gmap2相关的控件和功能，现在将这些控件提供给大家分享，这些控件大家可以单独使用，也可以统一下载或直接调用使用包含所有控件的Step1Map2.js，因为本人的站点服务器机器性能不好，所以不推荐直接调用本站的JS文件，不过假如您采用了本站的部分代码，建议经常光顾本站察看是否更新，呵呵

    所有的控件都是针对Google Maps API 2.0而制作，因此，可能在脱离了Google Maps API 2.0之后不能运行，您可以在这儿浏览关于Google Maps API 2.0的信息

    具体的基于Google Maps的简单应用，您可以看看Step1地图浏览服务和Google Earth地标文件下载系统

    想看到更多K_Reverter关于Google Maps API的文章，请浏览Google Maps API专栏

K_ReverterMap2.0说明

 

• 公用函数和方法
  • K_Function(一些公用函数的集合，都是静态函数)
• 自定义地图类型MapTypes
  • K_51ditu_MAP(调用www.51ditu.com的地图API实现的地图类型)
• 自定义标记Overlays
  • K_IconOverlay(在地图上显示一个小图标的标注类型)
  • K_ImageOverlay(地图上显示一张地图图片的标注类型)
  • K_HtmlMarker(用来在地图上显示带文字的标记)
• 自定义控件Controls
  • K_CrossControl(显示地图中心十字的控件)
  • K_HtmlControl(在地图上显示HTML内容的控件)
• 其它相关类
  • K_PointMover(让点沿轨迹移动的类)
  • K_XmlLoader(快捷的载入Xml文件或访问WebService的类)
  • K_JsLoader(远程加载并运行一个JS文件)
  • K_UserPosition(根据IP显示用户所在地理位置的类)
  • K_MSOPEncryptPointSrv(使用MOSP的EncryptPoint服务进行灵图数据加密的对象)
  • K_MSOPGeoCodeSrv(使用MOSP的GeoCodeSrv服务载入灵图的地理编码信息对象)

本文来源于Step1，由K_Reverter撰写并随时修改，有任何问题请到评论区留言

 

 

自定义公用函数

 

K_Function(一些公用函数的集合)

我在这次升级的时候特意将所有公用函数函数组合到这个类的静态方法里面，使代码结构更加清晰，由于K_Function的方法都是静态方法，因此不需要构造而直接通过KFunction.functionName()形式调用即可

K_Function包含以下公用函数,都是静态函数

静态方法	说明
K_Function.GetQueryString(key)	获得当前页的QueryString中的指定项，返回对应的值，如果不存在，返回空字符串 "" 而不是null，例如，当前的网址是index.html?id=3&page=5,则K_GetQueryString("id")返回3,而K_GetQueryString("page")返回5.
K_Function.GetCallBack(obj,method)	取得回调句柄的函数，这个函数虽然简单，可是因为在异步和事件处理之中非常重要而定义，返回一个函数，该函数代表运行obj对象的method方法.
K_Function.InheritClass(obj,cla)	将类cla的所有方法传递给obj对象，Google Maps API之中利用这个功能来实现继承，由于这个函数没有开放，我只好将代码抄录出来了
K_Function.SetCookie(name, value)	写入Cookie键值.
K_Function.DelCookie(name)	删除Cookie键值.
K_Function.GetCookie(name)	读取Cookie键值.

以下是该类的定义源码：

	function K_Function(){}
	//读取网址后缀的函数
	K_Function.GetQueryString=function(key)
	{
		var returnValue =""; 
		var sURL = window.document.URL;
		if (sURL.indexOf("?") > 0)
		{
			var arrayParams = sURL.split("?");
			var arrayURLParams = arrayParams[1].split("&");
			for (var i = 0; i < arrayURLParams.length; i++)
			{
				var sParam =  arrayURLParams[i].split("=");
				if ((sParam[0] ==key) && (sParam[1] != ""))
					returnValue=sParam[1];
			}
		}
		return returnValue;
	}
	K_Function.GetCallBack=function(obj,func)
	{
		return function(){return func.apply(obj,arguments)};
	}
	K_Function.InheritClass=function(a,b)
	{
		var c=function(){};
		c.prototype=b.prototype;
		a.prototype=new c();
	};
	//Cookie操作函数
	K_Function.GetCookieVal=function(offset)
	{
		var endstr = document.cookie.indexOf (";", offset);
		if (endstr == -1)
			endstr = document.cookie.length;
		return unescape(document.cookie.substring(offset, endstr));
	}
	K_Function.SetCookie=function(name, value)
	{
		var expdate = new Date();
		var argv = K_Function.SetCookie.arguments;
		var argc = K_Function.SetCookie.arguments.length;
		var expires = (argc > 2) ? argv[2] : null;
		var path = (argc > 3) ? argv[3] : null;
		var domain = (argc > 4) ? argv[4] : null;
		var secure = (argc > 5) ? argv[5] : false;
		if(expires!=null) expdate.setTime(expdate.getTime() + ( expires * 1000 ));
		document.cookie = name + "=" + escape (value) +((expires == null) ? "" : ("; expires="+ expdate.toGMTString()))+((path == null) ? "" : ("; path=" + path)) +((domain == null) ? "" : ("; domain=" + domain))+((secure == true) ? "; secure" : "");
	}
	K_Function.DelCookie=function(name)
	{
		var exp = new Date();
		exp.setTime(exp.getTime() - 1);
		var cval =K_GetCookie(name);
		document.cookie = name + "=" + cval + "; expires="+ exp.toGMTString();
	}
	K_Function.GetCookie=function(name)
	{
		var arg = name + "=";
		var alen = arg.length;
		var clen = document.cookie.length;
		var i = 0;
		while (i < clen)
		{
			var j = i + alen;
			if (document.cookie.substring(i, j) == arg)
				return K_Function.GetCookieVal(j);
			i = document.cookie.indexOf(" ", i) + 1;
			if (i == 0) break;
		}
		return null;
	}

 

自定义地图类型MapTypes

 

K_51ditu_MAP(调用灵图的地图API实现的地图类型)

K_51ditu_MAP采用Google新接口的模式实现，能够和Google比较完美的结合，这次升级的时候没有采用MOSP的模式，因为那个模式比较慢.

注意:根据Google文档的说明，向地图上添加类型最好在地图已经使用setCenter设置了地图的位置之后再运行，否则可能出错，而且假如你要使用GMapTypeControl控件显示地图类型列表，一定要在使用前添加K_51ditu_MAP，否则不会显示在列表之中。

以下是一个使用范例：

	map.addMapType(K_51ditu_MAP);
	map.setMapType(K_51ditu_MAP);

查看范例(K_51ditu_MAP.html)

 

 

自定义标记 Overlays

 

K_ImageOverlay(用来在地图上显示一张图片的控件)

K_ImageOverlay是一个自定义的Overlay,用法和Google Map中自定义的GMarker和GPolyline差不多，都是通过GMap2的addOverlay(overlay)添加到地图之中，通过removeOverlay(overlay)从地图中移除。

千万注意:考虑到系统性能的问题，一张图片在地图缩放级别变化时可能被显示的很大，这样可能影响性能

当显示的问题解决，最大的问题就在于怎样才能知道一张图片显示所需要的GLatLngBounds和rotation的值呢？这个问题比较复杂，我尝试写了一个WebService能够还算有点精确的处理这个问题，如果WebService客户端在地图上取三个特征点，将三个特征点在图片上的坐标和经纬度坐标发送到WebService,就能从返回结果中获得该GBounds和rotation的值，WebService的地址在http://www.step1.cn/map/addOverlay.asmx，更具体的内容我会在以后专文讨论。

K_ImageOverlay的构造函数有4个参数，分别为

参数	说明
imageUrl	图片的Url地址
bounds	用来描述图片显示区域矩形经纬度的GLatLngBounds,如果需要进行图片旋转，则应该是旋转前的矩形
rotation	图片的顺时针旋转角，用度数表示，(-180 ~ 180)
opacity	图片的显示不透明度(0~1),该值越小越透明

使用这样几个参数是有原因的，因为在Google Earth的KML文件之中，添加一个图片在Google Earth主要就是这几个参数，因此，使用此控件来显示从KML文件中读取出来的GroundOverlay,直接将参数传递即可，不需要任何形式的转化。

K_ImageOverlay主要方法有

方法	说明
setOpacity	重新设置图片的不透明度，必须在该Overlay已经添加到地图中之后
display	用参数true和false来指定该图片是否显示

以下是该类的定义源码：

//地图上显示一张地图图片的标注类型
	function K_ImageOverlay(imageUrl,bounds,rotation,opacity)
	{
		this.imageUrl=imageUrl;
		this.bounds=bounds;
		this.rotation=-rotation;
		this.opacity=opacity||0.45;
	}
	K_ImageOverlay.prototype = new GOverlay();
	K_ImageOverlay.prototype.initialize=function(a)
	{
		this.map=a;
		if(this.rotation>5 || this.rotation<-5)
		{
			this.drawElement=document.createElement("v:Image");
			this.drawElement.style.rotation=this.rotation;
		}
		else
			this.drawElement=document.createElement("img");
		this.drawElement.title=this.imageUrl;
		this.drawElement.style.position="absolute";
		this.drawElement.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+(this.opacity*100)+");";
		this.drawElement.src=this.imageUrl;
		if(document.all==1)
		{
			this.drawElement.unselectable="on";
			this.drawElement.onselectstart=function(){return false};
			this.drawElement.galleryImg="no"
		}
		else
		{
			this.drawElement.style.MozUserSelect="none"
		}
		this.drawElement.style.border="0";
		this.drawElement.style.padding="0";
		this.drawElement.style.margin="0";
		this.drawElement.οncοntextmenu=function(){return false};
		a.getPane(G_MAP_MARKER_PANE).appendChild(this.drawElement);
	};
	K_ImageOverlay.prototype.redraw=function(a)
	{
		if(!a)return;
		var min=this.map.fromLatLngToDivPixel(this.bounds.getSouthWest());
		var max=this.map.fromLatLngToDivPixel(this.bounds.getNorthEast());
		this.drawElement.style.left=(min.x)+"px";
		this.drawElement.style.top=(max.y)+"px";
		this.drawElement.style.width=(max.x-min.x)+"px";
		this.drawElement.style.height=(min.y-max.y)+"px";
	};
	K_ImageOverlay.prototype.setOpacity=function(opacity)
	{
		this.opacity=opacity||0.45;
		this.drawElement.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+(this.opacity*100)+");";
	}
	K_ImageOverlay.prototype.copy=function()
	{
		return new K_ImageOverlay(this.imageUrl,this.bounds,this.rotation,this.opacity)
	};
	K_ImageOverlay.prototype.remove=function()
	{
		this.drawElement.parentNode.removeChild(this.drawElement);
	}

以下是一个使用范例：

	var bounds=new GLatLngBounds(new GLatLng(18.0400740574296,108.548384827952),new GLatLng(20.3537745028853,111.729042228649));
	imageOverlay=new K_ImageOverlay("http://www.gogocn.com/admin/map/map_hainan.jpg",bounds,0,0.5);
	map.addOverlay(imageOverlay);

查看范例(K_ImageOverlay.html)

 

K_IconOverlay(在地图上显示一个小图标的对象)

K_IconOverlay是一个自定义的Overlay,用法和Google Map中自定义的GMarker和GPolyline差不多，都是通过GMap2的addOverlay(control)添加到地图之中，通过removeOverlay(control)从地图中移除。

K_IconOverlay用来向地图上添加一个图标，同样是向地图上添加一个图片，该图标和K_ImageOverlay不同在于，K_ImageOverlay主要是用来添加地图图片，而这个主要是添加一个图标，功能开发的侧重点不同。

K_IconOverlay功能非常强大，除了可以指定大小之外，甚至还可以从一张大图片上截取一小块图片作为图标，这个功能开发不仅仅是为了显得Cool，因为在Google Earth的KML文件之中，很多图标就是这样存放的，支持这个功能就等于可以在Google Map之中查看KML地标文件中的标记，而且是能将Google Earth的集成图标显示出来，想必是比较实用的

K_IconOverlay的构造函数有4个参数，分别为

参数	说明
imageUrl	图标的引用文件地址
point	图标的显示位置经纬度，应该是一个GLatLng
scale	图标的显示缩放倍数
bounds	可选，图标如果是从一个大图片文件上截取的，bounds代表截取区域，应该是一个GBounds,值得注意的是，为了和地理坐标对应，图片以左下角坐标为(0,0),而不是大家习惯的左上角

K_IconOverlay完全参照于GMarker，该Overlay提供的方法和使用方式完全可以参照GMarker.

如果要给此K_IconOverlay添加infowindow的显示，也可以完全参照GMarker的用法，具体可以查看范例(8.markerinfowindow.html)

以下是该类的定义源码：

//在地图上显示一个小图标的标注类型
	function K_IconOverlay(imageUrl,point,scale,bounds,color)
	{
		this.imageUrl=imageUrl;
		this.point=point;
		this.scale=scale?scale:1;
		this.bounds=bounds;
		this.color=color;
		this.icon=new Object();
		this.icon.iconSize=new GSize(this.scale*32,this.scale*32);
	}
	K_IconOverlay.prototype = new GOverlay();
	K_IconOverlay.prototype.initialize=function(a)
	{
		this.map=a;
		this.div=document.createElement("img");
		a.getPane(G_MAP_MARKER_PANE).appendChild(this.div);
		GEvent.bindDom(this.div,"load",this,this.setClip);
		this.div.style.display="none";
		this.div.src=this.imageUrl;
		this.div.style.position="absolute";
		if(document.all)
		{
			this.div.unselectable="on";
			this.div.onselectstart=function(){return false};
			this.div.galleryImg="no";
			this.div.style.filter="progid:DXImageTransform.Microsoft.Chroma(color='#"+this.color+"')";
		}
		else
		{
			this.div.style.MozUserSelect="none";
		}
		this.div.style.border="0";
		this.div.style.padding="0";
		this.div.style.margin="0";
		color=(this.color)?this.color:"FFFFFF";
		this.div.style.cursor=document.all?"hand":"pointer";
		this.div.οncοntextmenu=function(){return false};
		GEvent.bindDom(this.div,"mousedown",this,this.onMouseDown);
	};
	K_IconOverlay.prototype.setClip=function()
	{
		this.div.style.display='';
		this.currentSize=new GSize(this.div.offsetWidth,this.div.offsetHeight);
		if(this.bounds)
		{
			this.div.style.clip="rect("+((this.currentSize.height-this.bounds.maxY)*this.scale)+"px "+(this.bounds.maxX*this.scale)+"px "+((this.currentSize.height-this.bounds.minY)*this.scale)+"px "+(this.bounds.minX*this.scale)+"px)";
			this.icon.iconSize=new GSize(this.scale*(this.bounds.maxX-this.bounds.minX),this.scale*(this.bounds.maxY-this.bounds.minY));
		}
		else
			this.icon.iconSize=new GSize(this.scale*this.currentSize.width,this.scale*this.currentSize.height);
		this.div.width=(this.currentSize.width*this.scale);
		this.div.height=(this.currentSize.height*this.scale);
		this.div.style.display='';
		this.redraw(true);
	}
	K_IconOverlay.prototype.remove=function()
	{
		this.div.parentNode.removeChild(this.div);
	};
	K_IconOverlay.prototype.setPoint=function(point)
	{
		this.point=point;
		this.redraw(true);
	};
	K_IconOverlay.prototype.getIcon=function()
	{
		return this.icon;
	};
	K_IconOverlay.prototype.copy=function()
	{
		return new K_IconOverlay(this.imageUrl,this.point,this.scale,this.bounds,this.color);
	};
	K_IconOverlay.prototype.redraw=function(a)
	{
		if(!a)return;
		if(!this.currentSize)return;
		var c=this.map.fromLatLngToDivPixel(this.point);
		if(this.bounds)
		{
			this.div.style.left=(c.x-(this.bounds.maxX+this.bounds.minX)/2*this.scale)+"px";
			this.div.style.top=(c.y-(this.currentSize.height*2-this.bounds.maxY-this.bounds.minY)/2*this.scale)+"px";
		}
		else
		{
			this.div.style.left=(c.x-this.currentSize.width*this.scale/2)+"px";
			this.div.style.top=(c.y-this.currentSize.height*this.scale/2)+"px";
		}
	};
	K_IconOverlay.prototype.onMouseDown=function(a)
	{
		if(document.all)
		{
			window.event.cancelBubble=true;
			window.event.returnValue=false
		}
		else
		{
			a.cancelBubble=true;
			a.preventDefault();
			a.stopPropagation()
		}
		GEvent.trigger(this,"click",this);
	};
	K_IconOverlay.prototype.openInfoWindowHtml=function(html)
	{
		this.map.openInfoWindowHtml(this.point,html);
	}

以下是一个使用范例：

	var point=new GLatLng(29.94176113301537,112.6857368551186);
	iconOverlay=new K_IconOverlay("/Map/Icons/palette-2.png",point,1,new GBounds(160,192,192,224));
	map.addOverlay(iconOverlay);

查看范例(K_IconOverlay.html)

 

K_HtmlMarker(用来在地图上显示带文字的标记)

K_HtmlMarker是一个自定义的Overlay,用法和Google Map中自定义的GMarker和GPolyline差不多，都是通过GMap2的addOverlay(control)添加到地图之中，通过removeOverlay(control)从地图中移除。

这次更新对K_HtmlMarker进行了大幅调整，以前K_HtmlMarker是一个独立的Overlay,而现在,K_HtmlMarker的主要功能是在原有的Marker旁边添加文字而成为一个新的Marker,我觉得这样组织比较灵活，本来我更希望能做一个类似于GIcon的对象，可是后来发现GIcon和Gmarker从代码上来讲密不可分，所以我只好采用了这个方案。

该控件名称为K_HtmlMarker来自于它的上一个版本的设计构思，实际上不推荐在名称之中使用HTML语法，当然，简单的比如字体颜色是没有问题的

K_HtmlMarker的构造函数有3个参数，分别为

参数	说明
icon	注意不是图标，而是用来作为图标的一个Overlay,这个Overlay可以是一个GMarker,也可以是一个K_IconOverlay，这个Overlay应该是还没有添加到地图之中的，可以不设置该Overlay的经纬度，因为K_HtmlMarker会设置该Overlay的经纬度以便显示在一起，实际上Overlay的经纬度设置会被忽略。
point	标记的显示位置经纬度，应该是一个GLatLng
html	标记显示的文字Label内容

K_HtmlMarker虽然本身包含一个Overlay,可是使用方法和一个单一的Overlay没有什么不同，该Overlay提供的方法和使用方式完全可以参照GMarker.

如果要给此K_HtmlMarker添加infowindow的显示，也可以完全参照GMarker的用法，具体可以查看范例(8.markerinfowindow.html)

以下是该类的定义源码：

//自定义的HTML marker标注类型，以指定点显示HTML内容
	function K_HtmlMarker(icon,point,html)
	{
		this.icon=icon;
		this.point=point;
		this.html=html;
	}
	K_HtmlMarker.prototype = new GOverlay();
	K_HtmlMarker.prototype.initialize=function(a)
	{
		this.map=a;
		a.addOverlay(this.icon);
		this.icon.setPoint(this.point);
		this.icon.initialize(a);
		GEvent.bindDom(this.icon,"mousedown",this,this.onMouseDown);
		this.div=document.createElement("span");
		this.div.align="left";
		this.div.style.position="absolute";
		this.div.style.cursor="default";
		this.div.style.width="200px";
		this.div.innerHTML=this.html;
		a.getPane(G_MAP_MARKER_PANE).appendChild(this.div);
		GEvent.bind(this.icon,"click",this,this.onMouseDown);
	};
	K_HtmlMarker.prototype.remove=function(){this.icon.remove();if(this.div&&this.div.parentNode){this.div.parentNode.removeChild(this.div)}};
	K_HtmlMarker.prototype.copy=function()
	{
		return new K_HtmlMarker(this.icon.copy(),this.point,this.html)
	};
	K_HtmlMarker.prototype.redraw=function(a)
	{
		this.icon.redraw(a);
		if(!a)return;
		var c=this.map.fromLatLngToDivPixel(this.point);
		iconSize=this.icon.getIcon().iconSize?this.icon.getIcon().iconSize:new GSize(32,32);
		this.div.style.left=(c.x+iconSize.width/2)+"px";
		this.div.style.top=(c.y-this.div.offsetHeight/2)+"px";
	};
	K_HtmlMarker.prototype.onMouseDown=function(a)
	{
		if(document.all)
		{
			window.event.cancelBubble=true;
			window.event.returnValue=false
		}
		else
		{
			a.cancelBubble=true;
			a.preventDefault();
			a.stopPropagation()
		}
		GEvent.trigger(this,"click",this);
	};
	K_HtmlMarker.prototype.openInfoWindowHtml=function(html)
	{
		this.map.openInfoWindowHtml(this.point,html);
	}

以下是一个使用范例：

	var point=new GLatLng(29.94176113301537,112.6857368551186);
	htmlOverlay=new K_HtmlMarker(new GMarker(point),point,"My Hometown");
	map.addOverlay(htmlOverlay);

查看范例(K_HtmlMarker.html)

 

 

自定义控件Controls

 

K_CrossControl(显示地图中心十字的控件)

K_CrossControl是一个自定义的Control,用法和Google Map中自定义的控件差不多，都是通过GMap2的addControl(control) 添加到地图之中，通过removeControl(control) 从地图中移除。

K_CrossControl会在地图上显示一个十字准星，当需要用户在地图上选择一个点的时候非常有用，

K_CrossControl这次更新有所改动，现在在地图大小可能变化的时候也能运行正常了

K_CrossControl更新到2.0之后取消了VML的显示模式，同意都采用图片的形式显示

K_CrossControl的构造函数有2个参数，都是可选参数，分别为

参数	说明
image	中心十字图片的路径，默认为[http://www.step1.cn/map/cross.gif]
size	中心十字图片的大小，默认为20*20

以下是该类的定义源码：

//显示地图中心十字的控件
	function K_CrossControl(image,size)
	{
		this.size=size?size:new GSize(20,20);
		this.image=image?image:"http://www.step1.cn/map/cross.gif";
		this.div=document.createElement("div");
		this.img=document.createElement("img");
		this.div.appendChild(this.img);
		this.div.style.position="absolute";
		this.img.style.position="absolute";
	}
	K_CrossControl.prototype=new GControl(true,false);
	K_CrossControl.prototype.initialize=function(map)
	{
		if(this.img.src!=this.image)
		{
			this.img.src=this.image;
		}
		this.img.width=this.size.width;
		this.img.height=this.size.height;
		this.resetSize();
		map.getContainer().appendChild(this.div);
		GEvent.bind(map,"resize",this,this.resetSize());
		return this.div;
	}
	K_CrossControl.prototype.resetSize=function()
	{
		this.img.style.left=(map.getSize().width/2-this.size.width/2)+"px";
		this.img.style.top=(map.getSize().height/2-this.size.height/2)+"px";
	}
	K_CrossControl.prototype.getDefaultPosition=function()
	{
		return new GControlPosition(G_ANCHOR_TOP_LEFT,new GSize(0,0));
	}

以下是一个使用范例：

	map.addControl(new K_CrossControl());

查看范例(K_CrossControl.html)

 

K_HtmlControl(在地图上显示HTML内容的对象)

K_HtmlControl是一个自定义的Control,用法和Google Map中自定义的控件差不多，都是通过GMap2的addControl(control) 添加到地图之中，通过removeControl(control) 从地图中移除。

K_HtmlControl用来在地图上指定位置显示一个自定义的HTML内容。

K_HtmlControl的构造函数有1个参数

参数	说明
html	要显示的HTML内容

以下是该类的定义源码：

	function K_HtmlControl(html)
	{
		this.html=html;
	}
	K_HtmlControl.prototype=new GControl(true,false);
	K_HtmlControl.prototype.initialize=function(a)
	{
		this.Map=a;
		this.div=document.createElement("div");
		this.div.style.cursor="default";
		this.div.style.position="absolute";
		this.div.unselectable="on";
		this.div.onselectstart=function(){return false};
		this.div.style.fontSize="11px";
		this.div.style.fontFamily="Arial, sans serif";
		this.div.style.MozUserSelect="none"
		this.div.innerHTML=this.html;
		a.getContainer().appendChild(this.div);
		GEvent.bindDom(this.div,"click",this,this.onClick);
		return this.div;
	};
	K_HtmlControl.prototype.getDefaultPosition=function()
	{
		return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(10,10))
	};
	K_HtmlControl.prototype.onClick=function()
	{
		GEvent.trigger(this,"click");
	}

以下是一个使用范例：

	htmlControl=new K_HtmlControl("<div style='padding:3;background-color:white;border:solid 1 black;cursor:hand;'>www.step1.cn</div>");
	map.addControl(htmlControl);
	GEvent.addListener(htmlControl,"click",function(){self.location="http://www.step1.cn";});

查看范例(K_HtmlControl.html)

 

 

其它相关类

 

K_PointMover(让点沿轨迹移动的类)

K_PointMover用来让一个地理点按照指定的速度沿着指定的轨迹移动，有了这个类，我们就可以非常容易的实现让一个地图上的Overlay在地图上移动(类似有的网站查询行车路线后的车跑动的示例)，或者是让地图自身自动的移动位置

K_PointMover的构造函数有4个参数

参数	说明
points	点的移动轨迹，通过数组形式指定路线上的一些点的经纬度坐标
time	每两次调整点的位置间隔的毫秒数，默认为100,1秒=1000毫秒
rate	每次移动的跨度，这个大约是以经纬度作为单位的，因此在缩放系数低的情况下，1个单位将是一个非常快的速度
handle	每次调整点的位置之后运行的句柄，运行时，以K_PointMover对象本身做参数，因此，可以使用K_PointMover的points属性来访问当前该点的位置

K_PointMover有2个方法

方法	说明
Move	开始执行移动过程，移动完成之后，该点会停留在终点，不过假如完成后重新调用该函数，则自动从起点开始重新执行该移动过程
Pause	暂停移动过程，通过Move重新开始从暂停的地方开始移动

以下是该类的定义源码：

	function K_PointMover(points,time,rate,handle)
	{
		this.points=points;
		this.time=time?time:100;
		this.rate=rate?rate:1;
		this.handle=handle;
		this.pointsIndex=0;
		this.numberIndex=0;
	}
	K_PointMover.prototype.Move=function()
	{
		if(!this.timer)
		{
			this.timer=setInterval(K_Function.GetCallBack(this,this.Move),this.time);
			this.point=this.points[this.pointsIndex];
			if(this.handle)
			{
				this.handle.call(null,this);
			}
			return;
		}
		else
		{
			if(!this.offset)
			{
				offsetX=this.points[this.pointsIndex+1].lng()-this.points[this.pointsIndex].lng();
				a=Math.log((1+Math.sin(this.points[this.pointsIndex].lat()*Math.PI/180))/(1-Math.sin(this.points[this.pointsIndex].lat()*Math.PI/180)))*180/Math.PI/2;
				a1=Math.log((1+Math.sin(this.points[this.pointsIndex+1].lat()*Math.PI/180))/(1-Math.sin(this.points[this.pointsIndex+1].lat()*Math.PI/180)))*180/Math.PI/2;
				offsetY=a1-a;//this.points[this.pointsIndex+1].lat()-this.points[this.pointsIndex].lat();
				offset=Math.sqrt(Math.pow(offsetX,2)+Math.pow(offsetY,2));
				if(offset==0)
					this.offset=new GSize(0,0);
				else
					this.offset=new GSize(offsetX/offset,offsetY/offset);
			}
			var lng=this.points[this.pointsIndex].lng()+this.rate*this.offset.width*(this.numberIndex+1);
			var lat=Math.log((1+Math.sin(this.points[this.pointsIndex].lat()*Math.PI/180))/(1-Math.sin(this.points[this.pointsIndex].lat()*Math.PI/180)))*180/Math.PI/2+this.rate*this.offset.height*(this.numberIndex+1);
			lat=(Math.asin((Math.pow(Math.E,lat*Math.PI/180*2)-1)/(Math.pow(Math.E,lat*Math.PI/180*2)+1))*180/Math.PI);
			if((lng-this.points[this.pointsIndex].lng())*(lng-this.points[this.pointsIndex+1].lng())<0 || (lat-this.points[this.pointsIndex].lat())*(lat-this.points[this.pointsIndex+1].lat())<0)
			{
				this.point=new GLatLng(lat,lng);
				if(this.handle)
					this.handle.call(null,this);
				this.numberIndex++;
			}
			else
			{
				this.pointsIndex++;
				this.numberIndex=0;
				this.offset=null;
				this.point=this.points[this.pointsIndex];
				if(this.handle)
					this.handle.call(null,this);
				if(this.pointsIndex>=this.points.length-1)
				{
					clearInterval(this.timer);
					this.pointsIndex=0;
					this.numberIndex=0;
				}
			}
		}
	}
	K_PointMover.prototype.Pause=function()
	{
		if(this.timer)
		{
			clearInterval(this.timer);
			this.timer=null;
		}
	}

以下是一个使用范例：

var map;
var moveMarker,pointMover;
function onLoad()
{
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.addControl(new K_CrossControl());
	map.setCenter(new GLatLng(36.94,106.08),4);
	var points=[new GLatLng(53.561,123.261),new GLatLng(18.161,109.572),new GLatLng(39.465,73.657),new GLatLng(48.277,134.708),new GLatLng(53.561,123.261)];
	var polyline=new GPolyline(points);
	map.addOverlay(polyline);
	moveMarker=new GMarker(points[0]);
	map.addOverlay(moveMarker);
	pointMover=new K_PointMover(points,100,0.1,MapMove);
}
function MapMove(pointMover)
{
	if(document.getElementById("MarkerMove").checked)
		moveMarker.setPoint(pointMover.point);
	if(document.getElementById("MapMove").checked)
		map.panTo(pointMover.point);
}

查看范例(K_PointMover.html)

K_XmlLoader(快捷的载入Xml文件或访问WebService的类)

K_XmlLoader 由于可能用到的KML文件和WebService比较多，因此我使用这个类来统一访问代码,该类完成从访问到返回结果的XML解析部分，如果该结果不能被解析为XML，则弹出包含该结果的警告而停止运行，因此在调用parseHandle参数中的句柄的时候表明该XML文档正常

K_XmlLoaderK_XmlLoader使用到了一个简单的函数K_Function.K_GetCallBack，因此，使用时必须包含该函数才能运行

K_XmlLoader的构造函数有1个参数

参数	说明
parseHandle	指出当XML加载完成后，进行XML处理的函数句柄，该句柄被调用的时候以K_XmlLoader对象本身做参数，因此，可以使用K_XmlLoader的xmlDoc属性来访问xml结果

K_XmlLoader只有一个Load方法

方法	说明
Load	加载XML文件或访问WebService,有2个参数，url是XML或WebService路径,postData(可选)是WebService发送的数据

以下是该类的定义源码：

	function K_XmlLoader(parseHandle)
	{
		this.parseHandle=parseHandle;
		this.xmlhttp =null;
	}
	K_XmlLoader.prototype.Load=function(url,postData)
	{
		this.url=url;
		this.xmlhttp =GXmlHttp.create();
		var method="GET";
		if(postData && postData.length>0)
			method="POST";
		this.xmlhttp.open(method,this.url,true);
		this.xmlhttp.onreadystatechange=K_Function.GetCallBack(this,this.ParseXmlFile);
		if(postData && postData.length>0)
		{
			this.xmlhttp.setRequestHeader ("Content-Type","text/xml; charset=utf-8"); 
			this.xmlhttp.setRequestHeader ("SOAPAction","/"/""); 
		}
		this.xmlhttp.send(postData);
	}
	K_XmlLoader.prototype.ParseXmlFile=function()
	{
		if(this.xmlhttp==null || this.xmlhttp.readyState!=4)
			return;
		this.xmlDoc = this.xmlhttp.responseXML;
		if(this.xmlDoc.documentElement==null && this.xmlhttp.responseText &&　this.xmlhttp.responseText!="")
		{
			try{this.xmlDoc=GXml.parse(this.xmlhttp.responseText);}
			catch(ce){}
		}
		if(this.xmlDoc.documentElement==null)
			this.responseText=this.xmlhttp.responseText;
		this.xmlhttp=null;
		if(this.parseHandle)
			this.parseHandle.call(null,this);
		GEvent.trigger(this,"loaded",this);
	}

以下是一个使用范例：

	var url=window.prompt('Xml File Path:','12.data.xml');
	var xmlLoader=new K_XmlLoader(ReadXml);
	xmlLoader.Load(url,data);
	function ReadXml(xl)
	{
		alert(xl.xmlDoc.xml);
          var markers = xl.xmlDoc.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
                                   parseFloat(markers[i].getAttribute("lat")));
	    var marker =new GMarker(point);
            map.addOverlay(marker);
          }
	}

查看范例(K_XmlLoader.html)

K_JsLoader(远程加载并运行一个JS文件)

K_JsLoader 远程加载并运行一个JS文件，当完成后，调用传入的句柄,如果要返回值，请在该JS文件之中给变量window._OLR赋值，该值就将会被作为参数传递给处理函数

K_JsLoaderK_LoadJS使用到了一个简单的函数K_Function.K_GetCallBack，因此，使用时必须包含该函数才能运行

K_JsLoader的构造函数有1个参数

参数	说明
parseHandle	指出当XML加载完成后，进行XML处理的函数句柄，该句柄被调用的时候以K_XmlLoader对象本身做参数，因此，可以使用K_XmlLoader的xmlDoc属性来访问xml结果

K_XmlLoader只有一个load方法

方法	说明
load(url)	加载指定URL的JS文件，参数url为文件路径

以下是该类的定义源码：

	function K_JsLoader(parseHandle)
	{
		this.parseHandle=parseHandle;
	}
	K_JsLoader.prototype.load=function(src)
	{
		if(!this.jsFile)
		{
			this.jsFile=document.createElement("script");
			this.jsFile.type="text/javascript";
			this.jsFile.defer=true;
			document.body.insertBefore(this.jsFile,document.body.firstChild);
			GEvent.bindDom(this.jsFile,"readystatechange",this,this.onReadyStateChange);
			GEvent.bindDom(this.jsFile,"load",this,this.onLoad);
		}
		this.jsFile.src=src;
		this.running=true;
	}
	K_JsLoader.prototype.onLoad=function(e)
	{
		if(window._OLR)
		{
			GEvent.trigger(this,"loaded",K_JsLoader.parseObject(window._OLR));
			if(this.parseHandle)
				this.parseHandle.call(null,window._OLR);
		}
		else
		{
			GEvent.trigger(this,"error");
		}
		window._OLR=null;
		if(!document.all && this.jsFile && this.jsFile.parentNode==document.body)
		{
			this.jsFile.removeAttribute("src");
			document.body.removeChild(this.jsFile);
			delete this.jsFile;
		}
		this.running=false;
	}
	K_JsLoader.parseObject=function(obj)
	{
		return obj;
	}
	K_JsLoader.prototype.onReadyStateChange=function(e)
	{
		if(!this.jsFile || this.jsFile.readyState!="loaded")
		{
			return;
		}
		this.onLoad();
	}
	K_JsLoader.getChild=function(arr,name)
	{
		for(var i=0;i< arr.childNodes.length;i++)
		{
			if(arr.childNodes[i].name==name)
			{
				return arr.childNodes[i];
			}
		}
	}

以下是一个使用范例：

	var url=window.prompt('Xml File Path:','12.data.xml');
	var xmlLoader=new K_XmlLoader(ReadXml);
	xmlLoader.Load(url,data);
	function ReadXml(xl)
	{
		alert(xl.xmlDoc.xml);
          var markers = xl.xmlDoc.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
                                   parseFloat(markers[i].getAttribute("lat")));
	    var marker =new GMarker(point);
            map.addOverlay(marker);
          }
	}

查看范例(K_JsLoader.html)

 

K_UserPosition(根据IP显示用户所在地理位置的类)

K_UserPosition是一个使用Microsoft VE控件获取用户所在位置的类，如果用户已经安装VE控件，则返回VE控件记录的地理位置(由用户自己选择位置)，否则则直接使用IP,并通过Microsoft的JS文件实现IP到地理经纬度的转换。

K_UserPosition的构造函数没有参数，并且只有一个Load方法

方法	说明
Load	调用该方法后开始载入用户地理位置，handle参数是当获取地理位置成功之后以该K_UserPosition为对象调用的方法，该方法可以使用point(代表位置经纬度的GLatLng),zoom(代表该位置最合适的缩放级别)两个属性.

该控件使了一个函数K_LoadJS来载入JS文件，因此，必须包含本函数，该类才能正常使用

以下是该类的定义源码：

//这是调用用户所在地点的对象
	function K_UserPosition()
	{
		this.loaded=false;
	}
	K_UserPosition.prototype.Load=function(handle)
	{
		this.handle=handle;
		this.LoadByWiFi();
	}
	K_UserPosition.prototype.LoadByWiFi=function()
	{
		var wifi=this.GetWiFiControl();
		if(wifi)
		{
			try
			{
				var results = wifi.GetLocation();
				if(results&&results.length>0)
					{eval(results);return;}
			}
			catch(ex){}
		}
		window.SetAutoLocateViewport=K_Function.GetCallBack(this,this.SetAutoLocateViewport);
		window.ShowMessage=K_Function.GetCallBack(this,this.ShowMessage);
		new K_JsLoader().load("http://virtualearth.msn.com/WiFiIPService/locate.ashx?pos=");
	}
	K_UserPosition.prototype.GetWiFiControl=function()
	{
		var wifi=null;
		try
		{
			wifi=new ActiveXObject("WiFiScanner");
		}
		catch(e)
		{
			try
			{
				wifi=new ActiveXObject("Microsoft.MapPoint.WiFiScanner.1");
			}
			catch(e)
			{
				try
				{
					wifi=new WiFiScanner("Microsoft.MapPoint.WiFiScanner.1");
				}
				catch(e)
				{}
			}
		}
		return wifi;
	}
	K_UserPosition.prototype.ShowMessage=function(message)
	{
	}
	K_UserPosition.prototype.SetAutoLocateViewport=function(lat,lon,zoom,pin,message)
	{
		if(this.loaded)
			return;
		this.point=new GLatLng(lat,lon);
		this.zoom=17-zoom;
		this.pin=pin;
		this.message=message;
		this.loaded=true;
		if(this.handle)
		{
			this.handle.apply(this);
			this.handle=null;
		}
	}

以下是一个使用范例：

	var userPosition=new K_UserPosition();
	userPosition.Load(function(){
		map.setCenter(this.point,this.zoom);
		var marker=new GMarker(this.point);
		map.addOverlay(marker);
		GEvent.addListener(marker,"click",function(){marker.openInfoWindowHtml('You Position');});
	});

查看范例(K_UserPosition.html)

 

K_MSOPEncryptPointSrv(使用MOSP的EncryptPoint服务进行灵图数据加密的对象)

K_MSOPEncryptPointSrv灵图的使用的经纬度坐标大约是经纬度坐标乘以100000的坐标，可是毕竟只是大约，所以需要进行精确的转换，就要使用本对象

K_MSOPEncryptPointSrv定义之中使用到了K_JsLoader，因此，使用时必须包含这些内容才能运行

K_MSOPEncryptPointSrv的构造函数有1个参数

参数	说明
handle	用来处理加密结果的句柄，当加密完成得到结果后，该句柄被调用，以加密结果做参数

K_MSOPEncryptPointSrv提供一个方法

方法	说明
EncryptPoint(points)	调用该方法后开始进行异步的数据加密，参数是一个GLatLng数组,包含待加密的点数据 ，加密的结果在以一个二维数组的格式发送给加密结果处理函数.

以下是该类的定义源码：

	function K_MSOPEncryptPointSrv(handle)
	{
		this.handle=handle;
		this.loader=new K_JsLoader();
		GEvent.bind(this.loader,"loaded",this,this.onLoad);
	}
	K_MSOPEncryptPointSrv.prototype.EncryptPoint=function(points,handle)
	{
		if(handle){this.handle=handle;}
		var str="http://www.step1.cn/51Ditu/Services/JsEP.aspx?";
		for(var i=0;i< points.length;i++)
		{
			str+=parseInt(points[i].lng()*100000)+","+parseInt(points[i].lat()*100000)+";";
		}
		str=str.substring(0,str.length-1);
		this.loader.load(str);
	}
	K_MSOPEncryptPointSrv.prototype.onLoad=function(resultObj)
	{
		GEvent.trigger(this,"end",resultObj);
		if(this.handle){this.handle.apply(this,[resultObj]);}
	}

以下是一个使用范例：

var map,eps,point;
function onLoad()
{
	map = new GMap2(document.getElementById("map"));
	map.setCenter(new GLatLng(36.94989178681327,106.083984375),6);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());

	eps=new K_MSOPEncryptPointSrv(SetInfo);
	ChangeInfo();
	GEvent.addListener(map,"moveend",ChangeInfo);
}
function ChangeInfo()
{
	point=map.getCenter();
	eps.EncryptPoint([point]);
}
function SetInfo(points)
{
	html='The Latlng of Center:('+point.lng()+','+point.lat()+')
';
	html=html+'The MOSP coordinate of Center:('+points[0][0]+','+points[0][1]+')';
	document.getElementById("Info").innerHTML=html;
}

查看范例(K_MSOPEncryptPointSrv.html)

 

K_MSOPGeoCodeSrv(使用MOSP的GeoCodeSrv服务载入灵图的地理编码信息对象)

K_MSOPGeoCodeSrv根据灵图的服务，进行从经纬度到地理信息的查询，例如，根据经纬度(114.11465,22.56203)得到的查询结果是："广东省深圳市罗湖区洪湖西路和洪湖东路交叉口东北321米处,湖景花园西北97米处"。

K_MSOPGeoCodeSrv定义之中使用到了K_JsLoader

K_MSOPGeoCodeSrv的构造函数有1个参数

参数	说明
handle	每次得到查询结果后运行的句柄，该句柄被调用的时候以K_MSOPGeoCodeSrv对象本身做参数，因此，可以使用K_MSOPGeoCodeSrv的status(查询状态)属性和result(查询结果字符串)属性来访问查询结果,有以下几种状态值： -2: 地理信息查询发生错误 -1: 超出可查询范围 0: 没有开始地理信息查询 1: 正在查询 2: 查询完成，结果正常

K_MSOPGeoCodeSrv提供一个方法

方法	说明
GetGeoCode(latlng)	调用该方法后开始进行地理编码查询，参数是代表该位置的一个GLatLng.

以下是该类的定义源码：

	function K_MSOPGeoCodeSrv(handle)
	{
		this.handle=handle;
		this.status=0;
		this.loader=new K_JsLoader();
		GEvent.bind(this.loader,"loaded",this,this.onLoad);
	}
	K_MSOPGeoCodeSrv.prototype.GetGeoCode=function(point)
	{
		if(73.12667>point.lng() || point.lng()>135.21180 || 18.12810>point.lat() || point.lat()>55.15600)
		{
			this.status=-1;
			this.handle.apply(this);
			return;
		}
		this.status=1;
		this.point=point;
		var str="http://www.step1.cn/51Ditu/Services/GeoCodeSrv.aspx?lng="+point.lng()+"&lat="+point.lat();
		this.loader.load(str);
	}
	K_MSOPGeoCodeSrv.prototype.onLoad=function(resultObj)
	{
		this.result=decodeURI(resultObj.result).replace(/%2c/gim," ");
		this.status=2;
		GEvent.trigger(this,"end",this);
		if(this.handle){this.handle.call(null,this);}
	}

以下是一个使用范例：

	autoGeoCode=new K_MSOPGeoCodeSrv(SetGeoCodeInfo);
	GEvent.addListener(map,"moveend",function(){autoGeoCode.GetGeoCode(map.getCenter());});
	autoGeoCode.GetGeoCode(map.getCenter());
	function SetGeoCodeInfo(geoCode)
	{
		if(geoCode.status==2)
			document.getElementById("Info").innerHTML=geoCode.result;
	}

查看范例(K_MSOPGeoCodeSrv.html)

 

<script language="javascript" src="/Basic.js" type="text/javascript"></script> <script src="http://count17.51yes.com/click.aspx?id=174911790&logo=12" type="text/javascript"></script> 流量统计 marginwidth="0" marginheight="0" src="http://count17.51yes.com/sa.aspx?id=174911790&refe=http%3A//www.google.com/search%3Fq%3Dgoogle+map%25E5%25BC%2580%25E5%258F%2591%26hl%3Dzh-CN%26lr%3D%26newwindow%3D1%26start%3D10%26sa%3DN&location=http%3A//www.step1.cn/GoogleApi/map2/total.html&color=16x&resolution=1024x768&returning=0&language=zh-cn&ua=Mozilla/4.0%20%28compatible%3B%20MSIE%206.0%3B%20Windows%20NT%205.1%29" frameborder="0" width="0" scrolling="no" height="0">