Google的没有中国的地理信息数据,这是我们使用Google Maps API遇到的最大的问题,如果能够将已有的图片地图附加到Google Maps里面,那将可以达成图片地图站和Google Map的互补——将Google地图的整体性和图片地图的数据结合起来。
怎么实现呢?首先是怎么显示图片,要将一张图片进行拉伸、旋转之后显示在地图上(这是必要的,因为地图所使用的坐标系统和Google Maps很可能不同),Google Maps API并没有提供相关的功能,我们可以通过自定义Overlay来实现这个功能,下面是我实现的一个自定义Overlay的代码:
1
function K_ImageControl(imageUrl,bounds,rotation,opacity)
2
{
3
this.imageUrl=imageUrl;
4
this.bounds=bounds;
5
this.rotation=-rotation;
6
this.opacity=opacity||0.45;
7
}
8
K_ImageControl.prototype.initialize=function(a)
9
{
10
this.map=a;
11
this.drawElement=a.ownerDocument.createElement("v:Image");
12
this.drawElement.style.position="absolute";
13
this.drawElement.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+(this.opacity*100)+");";
14
this.drawElement.style.rotation=this.rotation;
15
this.drawElement.src=this.imageUrl;
16
if(browser.type==1)
17
{
18
this.drawElement.unselectable="on";
19
this.drawElement.onselectstart=function(){return false};
20
}
21
else
22
{
23
this.drawElement.style.MozUserSelect="none"
24
}
25
if(browser.type==1)
26
{
27
this.drawElement.galleryImg="no"
28
}
29
this.drawElement.style.border="0";
30
this.drawElement.style.padding="0";
31
this.drawElement.style.margin="0";
32
this.drawElement.οncοntextmenu=function(){return false};
33
this.drawElement.appendChild(this.drawElement);
34
a.markerPane.appendChild(this.drawElement);
35
};
36
K_ImageControl.prototype.redraw=function(a)
37
{
38
if(!a)return;
39
var b=this.map.spec.getBitmapCoordinate(this.bounds.minY,this.bounds.minX,this.map.zoomLevel);
40
var min=this.map.getDivCoordinate(b.x,b.y);
41
b=this.map.spec.getBitmapCoordinate(this.bounds.maxY,this.bounds.maxX,this.map.zoomLevel);
42
var max=this.map.getDivCoordinate(b.x,b.y);
43
this.drawElement.style.left=(min.x)+"px";
44
this.drawElement.style.top=(max.y)+"px";
45
this.drawElement.style.width=(max.x-min.x)+"px";
46
this.drawElement.style.height=(min.y-max.y)+"px";
47
};
48
K_ImageControl.prototype.setOpacity=function(opacity)
49
{
50
this.opacity=opacity||0.45;
51
this.drawElement.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+(this.opacity*100)+");";
52
}
53
K_ImageControl.prototype.copy=function(){return new K_ImageControl(this.imageUrl,this.bounds,this.rotation,this.opacity)};
54
K_ImageControl.prototype.remove=window.GPolyline.prototype.remove;
55
K_ImageControl.prototype.display=window.GPolyline.prototype.display;
56
K_ImageControl.prototype.setZIndex=window.GPolyline.prototype.setZIndex;
57
K_ImageControl.prototype.getLatitude=function(){return 180};
在以上代码中,我使用了VML的v:image来实现图片的旋转功能,在使用此Overlay时,和Google集成的GMarker和GPolyline用法一样,定义时各参数如下
imageUrl 图片的地址
GBounds 图片的显示区域,是GBounds类型,如果图形需要旋转,则是旋转前的矩形区域
rotation 图片的旋转角,用度数表示-180~180
opcity 图片的不透明度0~1
例如通过如下代码将图片附加到地图上:
1
imageOverlay=new K_ImageControl("http://www.qh.xinhuanet.com/qhpd/picture/qinghai.jpg",new GBounds(89.04898,31.54021,103.3235,39.26913),-1);
2
map.addOverlay(imageOverlay);
3
imageOverlay.display(true);
另外,在运行时可以通过setOpcity来更改透明度。
这样,就算成功了一半,可是,图片究竟要显示在Google 地图的哪儿呢?这就涉及到图片所描绘的坐标的确定的问题,可以说,大部分的图片,我们都不能直接知道该图片描绘的区域经纬度,因此,我写了一个基于AJAX框架的网页来计算这个问题,如果指定图片上三个点的经纬度并发送到WebService,就能够从返回结果中读到该图片地图的GBounds和rotation,
详情可以查看本站地图服务的“添加图片功能”