将图片地图附加到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.oncontextmenu=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，

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