使用Google api v2版本需要域名对应的key, v3版本api可以直接使用
?
<script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>
?
?
例子:
?
<!DOCTYPE html><html> <head> <title>Google</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/style.css" type="text/css" /> <link rel="stylesheet" href="css/pageStyle.css" type="text/css" /> <script type="text/javascript" src="js/OpenLayers/lib/OpenLayers.js"></script> <script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script> <script type="text/javascript"> var map, layer_street; function init() { // Creating the Map Viewer map = new OpenLayers.Map("map", { maxResolution:'auto', maxExtent: new OpenLayers.Bounds( -128 * 156543.03390625, -128 * 156543.03390625, 128 * 156543.03390625, 128 * 156543.03390625 ), displayProjection: new OpenLayers.Projection("EPSG:4326") }); layer_street = new OpenLayers.Layer.Google( "Google Streets", // the default { numZoomLevels: 20 , projection: "EPSG:900913", } ); map.addLayer(layer_street); map.zoomToMaxExtent(); map.setCenter(new OpenLayers.LonLat(12945347.18614,4859501.42103), 13); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.MousePosition()); } </script> </head> <body onload="init()"> <div id="map" class="bigmap"></div> </body></html>?
? ?google使用投影EPSG:900013,因此需要设置projection为EPSG:900913
? 设置displayProjection为EPSG:4326,这样地图上鼠标MousePosition显示的经纬度
? css/style.css:?OpenLayers-2.11\theme\default\style.css
??css/pageStyle.css:
?
@CHARSET "UTF-8";body { margin: 0; padding: 0; height: 100%;}.bigmap { position: absolute; left: 0; top: 0px; padding: 0; width: 100%; height: 100%; border: 1px solid #333;}?
参考:
Google (v3) Layer Example http://www.openlayers.org/dev/examples/google-v3.html
?