GIS 학습 기록 (5): OpenLayers Google 지도 표시

3057 단어 GoogleGisexampleOpenLayers지도.
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>
 
   구 글 은 투영 EPSG: 900013 을 사용 하기 때문에 projection 을 EPSG: 900913 으로 설정 해 야 합 니 다.
  display Projection 을 EPSG: 4326 으로 설정 하면 지도 에서 마우스 마우스 마우스 포지션 이 표시 하 는 경위도 입 니 다.
  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
쇼핑 몰 시리즈 (7) 백 스테이지 상품 추가 실현
Eclipse C / C + + 설정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage