OpenLayers 学习笔记 (3) 使用 Google Maps 作底图

用 OpenLayers 叠加 Google Maps 显示深圳行政区划和深圳酒店的例子。

 1 < html >
 2 < head >
 3 < title > Test OpenLayers < / title>
 4 < meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 " >
 5 < script src = " http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQI... "  type = " text/javascript " >< / script>
 6 < script src = " openlayers/OpenLayers.js " >< / script>
 7 < script defer = " defer "  type = " text/javascript " >
 8 var  map;
 9 var  cityZone;
10 var  hotell;
11 var  bounds;
12 function  init() {
13    OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
14    OpenLayers.Util.onImageLoadErrorColor = "transparent";
15
16    var options = {
17        numZoomLevels: 20
18    };
19
20    map = new OpenLayers.Map('map', options);
21
22    var googleMap = new OpenLayers.Layer.Google(
23        "Google 卫星图",
24        {
25            type: G_SATELLITE_MAP, 
26            maxZoomLevel: 18
27        }
28    );
29
30    map.addLayers([googleMap]);
31
32    cityZone = new OpenLayers.Layer.WMS( 
33        "深圳行政区划", 
34        "http://localhost:8080/geoserver/wms",
35        {
36            layers: 'emap:sz_cityzone',
37            srs: 'EPSG:4326',
38            style: '',
39            format: 'image/png',
40            tiled: 'true',
41            transparent: true
42        },
43        {   
44            reproject: true,
45            opacity: 0.8,
46            isBaseLayer: false
47        } 
48    );
49
50    map.addLayer(cityZone);
51
52    hotell = new OpenLayers.Layer.WMS( 
53        "深圳酒店宾馆", 
54        "http://localhost:8080/geoserver/wms",
55        {
56            layers: 'emap:sz_hotell',
57            srs: 'EPSG:4326',
58            style: '',
59            format: 'image/png',
60            tiled: 'true',
61            transparent: true
62        },
63        {   
64            reproject: true,
65            opacity: 0.8,
66            isBaseLayer: false
67        } 
68    );
69
70    map.addLayer(hotell);
71
72    map.setCenter(new OpenLayers.LonLat(114.0551382618498, 22.53313376205144), 8);
73    map.addControl(new OpenLayers.Control.MousePosition());
74    map.addControl(new OpenLayers.Control.LayerSwitcher());
75
76    bounds = new OpenLayers.Bounds(113.71955833435085,22.42699394226079,114.66722908020016,22.87406196594241);
77
78    map.zoomToExtent(bounds);
79}
80 < / script>
81 < style type = " text/css " >
82 #map  {
83    width: 100%;
84    height: 550px;
85    border: 2px solid black;
86    background-color: #FFFFFF;
87}
88 < / style>
89 < / head>
90 < body onload = " init() " >
91      < h1 > OpenLayers Test < / h1>
92      < div id = " map " >< / div>
93 < / body>
94 < / html>
95