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&v=2&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=" 600px; height: 400px"></div>
65 </body>
66 </html>
67