OpenLayers中使用Google Maps地图

参考:http://book.51cto.com/art/200807/81107.htm


1、注册使用Google API密钥。

到网址http://code.google.com/intl/zh-CN/apis/maps/signup.html上,登录Google帐户,选中同意条款,输入http://localhost (在本机网站上试验),即可获得个人密钥。

2、下载使用OpenLayers

首先需要在官方网站http://www.openlayers.org 下载OpenLayers 的压缩包。解压之后可以得到包含示例、文档、类库、主题、工具等OpenLayers 类库的各方面内容。如果在站点中使用OpenLayers 地图浏览客户端,仅需要将解压后的lib 目录和img 目录拷贝到网站指定的目录中,同时保证/lib 与/img 在同一目录中,就可以通过加载lib 目录中的OpenLayer.js 文件来实现地图浏览客户端的功能调用。

3、 编写google.html文件

在与/lib和/img同目录下编辑文件google.html,内容如下(代码中key是指Google Maps API密钥,由于是在本机试验没有更改成本人申请的密钥也可实现地图访问):

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;
key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>
<script src="lib/OpenLayers.js"></script>
<script type="text/javascript">
function init(){
var map = new OpenLayers.Map( 'map' ,
{ controls: [new OpenLayers.Control.MouseDefaults()] , 'numZoomLevels':20});
var satellite = new OpenLayers.Layer.Google( "Google Satellite" ,
{type: G_SATELLITE_MAP, 'maxZoomLevel':18} );
map.addLayers([satellite]);
var googlehybrid = new OpenLayers.Layer.Google( "Google Hybrid" ,
{type: G_HYBRID_MAP });
map.addLayers([googlehybrid]);
var googlestreet = new OpenLayers.Layer.Google( "Google Steets" ,
{type: G_NORMAL_MAP, 'maxZoomLevel':18} );
map.addLayers([googlestreet]);
map.setCenter(new OpenLayers.LonLat(116.3876, 39.8983), 13);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
map.addControl( new OpenLayers.Control.PanZoomBar() );
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.MousePosition({element:
$('location')}));
}
</script>
</head>
<body onload="init()">
<h1>OpenLayers With Google Layer</h1>
<div id="map"></div>
<div id="location"></div>
<div id="scale"></div>
</body>
</html>
4、测试

在浏览器中输入指向google.html文件的URL,即可看到地图服务的显示结果。

posted on 2010-03-03 21:32  落人间  阅读(1111)  评论(1编辑  收藏  举报