GoogleMap中添加自定义地图类型

GoogleMap API中支持用户添加自定义的地图类型，这样就可以展示我们自己的地图了

 

代码

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
3   < html xmlns ="http://www.w3.org/1999/xhtml" xmlns:v ="urn:schemas-microsoft-com:vml" >
4 < head >
5 < meta http-equiv ="content-type" content ="text/html; charset=utf-8" />
6 < title > GMap地图输出V1.0 示例 </ title >
7 < script src ="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=you-key&hl=zh-CN"
8 type ="text/javascript" ></ script >
9 < script type ="text/javascript" >
10 function initialize() {
11 if (GBrowserIsCompatible()) {
12 // 定义显示的范围和地图等级
13   var mapBounds = new GLatLngBounds( new GLatLng( 39.7541381121 , 116.174165661 ), new GLatLng( 40.0303473042 , 116.567479924 ));
14 var mapMinZoom = 11 ;
15 var mapMaxZoom = 17 ;
16
17 // 设置版权信息
18 // 使用的每个图像都应该有版权许可信息
19 var myCopyright = new GCopyrightCollection( " (c) " );
20 myCopyright.addCopyright( new GCopyright( ' Demo ' ,
21 new GLatLngBounds( new GLatLng( - 90 , - 180 ), new GLatLng( 90 , 180 )),
22 0 , ' ©2010 LionGIS ' ));
23
24 // 创建图块叠加层并实现三个抽象方法
25 var tilelayer = new GTileLayer(myCopyright, mapMinZoom, mapMaxZoom);
26 var mercator = new GMercatorProjection(mapMaxZoom + 1 );
27 tilelayer.getTileUrl = function (tile,zoom) {
28
29 if ((zoom < mapMinZoom) || (zoom > mapMaxZoom)) {
30 return " nomap.png " ;
31 }
32 var ymax = 1 << zoom;
33 var y = ymax - tile.y - 1 ;
34 var tileBounds = new GLatLngBounds(
35 mercator.fromPixelToLatLng( new GPoint( (tile.x) * 256 , (tile.y + 1 ) * 256 ) , zoom ),
36 mercator.fromPixelToLatLng( new GPoint( (tile.x + 1 ) * 256 , (tile.y) * 256 ) , zoom )
37 );
38 if (mapBounds.intersects(tileBounds)) {
39 // 计算图片路径
40 return zoom + " / " + tile.x + " / " + y + " .png " ;
41 } else {
42 return " nomap.png " ;
43 }
44 };
45 tilelayer.isPng = function () { return true ;};
46 tilelayer.getOpacity = function () { return 1.0 ; }
47
48 // 定义自己的地图类型
49 var myTileLayer = new GMapType([tilelayer],G_NORMAL_MAP.getProjection(), ' 测试地图 ' ,{errorMessage: ' 图片加载出错啦 ' });
50 var map = new GMap2(document.getElementById( " map_canvas " ));
51 map.setCenter( new GLatLng( 39.917 , 116.397 ), 13 );
52 // 增加到地图上
53 map.addMapType(myTileLayer);
54
55 map.setMapType(myTileLayer);
56
57 map.addControl( new GLargeMapControl());
58 map.addControl( new GHierarchicalMapTypeControl());
59 }
60 }
61 </ script >
62 </ head >
63 < body onload ="initialize()" onunload ="GUnload()" >
64 < div id ="map_canvas" style ="width: 600px; height: 400px" ></ div >
65 </ body >
66 </ html >
67