将图片地图附加到Google Map中

        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，

        详情可以查看本站地图服务的“添加图片功能”