OpenLayers-加载地图数据(Google Map)

除了WMS地图外,OpenLayers可以直接添加Google Map, Microsoft Virtual Earth等地图。

 

1. 添加google map的key     使用google map的数据需要google map的一个key。OpenLayers的examples里面有一个key,可以直接使用。也可以在https://developers.google.com/maps/signup?hl=zh-cn上获取一个自己的key。

<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> 2)

 2. 创建OpenLayers Google 图层对象

复制代码
<script type="text/javascript"> var map = null; function init() { //创建map对象,  map = new OpenLayers.Map("map"); map.addControl(new OpenLayers.Control.LayerSwitcher()); //创建google Map图层对象 var gphy = new OpenLayers.Layer.Google( "Google Physical", //Google Map Physical图层  {type: G_PHYSICAL_MAP} ); var gmap = new OpenLayers.Layer.Google( "Google Streets", //Google Map Streets图层  {numZoomLevels: 20} //设置Google Map的zoom级别  ); var ghyb = new OpenLayers.Layer.Google( "Google Hybrid", //Google Physical图层  {type: G_HYBRID_MAP, numZoomLevels: 20} ); var gsat = new OpenLayers.Layer.Google( "Google Satellite", //Google Map Satellite图层  {type: G_SATELLITE_MAP, numZoomLevels: 22} ); // 添加图层  map.addLayers([gphy, gmap, ghyb, gsat]); // 放大到全屏  map.zoomToMaxExtent(); } </script>
复制代码

 

 3. 设置html的onload函数

<BODY onload="init()">

 

然后打开网页就可以看到OpenLayers加载的Google Map地图。通过右侧的Layer Switch可以切换图层。

OpenLayers-加载地图数据(Google Map)_第1张图片

 

完整的代码如下所示: 

复制代码
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  2 <HTML>  3 <HEAD>  4 <TITLE> Google Map </TITLE>  5 <link rel="stylesheet" href="./OpenLayers-2.10/theme/default/style.css" type="text/css" />  6 <link rel="stylesheet" href="css/style.css" type="text/css" />  7 <script src="./OpenLayers-2.10/lib/OpenLayers.js"></script>  8 <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>  9 <script type="text/javascript"> 10 11 var map = null; 12 function init() 13  { 14 //创建map对象, 15  map = new OpenLayers.Map("map"); 16  map.addControl(new OpenLayers.Control.LayerSwitcher()); 17 18 //创建google Map图层对象 19 var gphy = new OpenLayers.Layer.Google( 20 "Google Physical", //Google Map Physical图层 21  {type: G_PHYSICAL_MAP} 22  ); 23 var gmap = new OpenLayers.Layer.Google( 24 "Google Streets", //Google Map Streets图层 25  {numZoomLevels: 20} //设置Google Map的zoom级别 26  ); 27 var ghyb = new OpenLayers.Layer.Google( 28 "Google Hybrid", //Google Physical图层 29  {type: G_HYBRID_MAP, numZoomLevels: 20} 30  ); 31 var gsat = new OpenLayers.Layer.Google( 32 "Google Satellite", //Google Map Satellite图层 33  {type: G_SATELLITE_MAP, numZoomLevels: 22} 34  ); 35 36 // 添加图层 37  map.addLayers([gphy, gmap, ghyb, gsat]); 38 // 放大到全屏 39  map.zoomToMaxExtent(); 40  } 41 </script> 42 43 </HEAD> 44 45 <BODY onload="init()"> 46 <div id="map" class="smallmap"></div> 47 </BODY> 48 </HTML>
复制代码

你可能感兴趣的:(OpenLayers-加载地图数据(Google Map))