当前位置: 代码迷 >> GIS >> GIS学习记录(五):OpenLayers显示Googlemap
  详细解决方案

GIS学习记录(五):OpenLayers显示Googlemap

热度:244   发布时间:2016-05-05 06:29:41.0
GIS学习记录(五):OpenLayers显示Google地图

使用Google api v2版本需要域名对应的key, v3版本api可以直接使用

?

<script src="http://maps.google.com/maps/api/js?v=3.6&amp;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&amp;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

?

  相关解决方案