• Open API/Google

    google API 스트릿뷰 Street View

    2016. 11. 22.

    by. Yo.



    스트릿뷰 샘플 소스입니다..


    회사 앞으로 찾아봤는데 잘 나오네요 


    기본형에다가 해당 위경도 , POV 값을표기하는 내용 추가했습니다.


    API Url : https://developers.google.com/maps/documentation/javascript/streetview?hl=ko


    Test Url : http://source.uhoon.co.kr/test/1957.html






    <!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Street View service</title>
	<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
		function initialize() {
			var fenway = new google.maps.LatLng(
				37.569303, 126.97943099999998);
			var mapOptions = {
				center: fenway,
				zoom: 14,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			var map = new google.maps.Map(
				document.getElementById(
					'map-canvas'), mapOptions);
			var panoramaOptions = {
				position: fenway,
				pov: {
					heading: 34,
					pitch: 10
				}
			};
			var panorama = new google.maps.StreetViewPanorama(
				document.getElementById('pano'),
				panoramaOptions);
			map.setStreetView(panorama);
			google.maps.event.addListener(
				panorama, 'links_changed', function () {
					var linksTable = document.getElementById(
						'links_table');
					while (linksTable.hasChildNodes()) {
						linksTable.removeChild(linksTable
							.lastChild);
					};
					var links = panorama.getLinks();
					for (var i in links) {
						var row = document.createElement(
							'tr');
						linksTable.appendChild(row);
						var labelCell = document.createElement(
							'td');
						labelCell.innerHTML = '<b>Link: ' +
							i + '</b>';
						var valueCell = document.createElement(
							'td');
						valueCell.innerHTML = links[i].description;
						linksTable.appendChild(labelCell);
						linksTable.appendChild(valueCell);
					}
				});
			google.maps.event.addListener(
				panorama, 'position_changed',
				function () {
					var positionCell = document.getElementById(
						'position_cell');
					positionCell.firstChild.nodeValue =
						panorama.getPosition() + '';
				});
			google.maps.event.addListener(
				panorama, 'pov_changed', function () {
					var headingCell = document.getElementById(
						'heading_cell');
					var pitchCell = document.getElementById(
						'pitch_cell');
					headingCell.firstChild.nodeValue =
						panorama.getPov().heading + '';
					pitchCell.firstChild.nodeValue =
						panorama.getPov().pitch + '';
				});
		}
		google.maps.event.addDomListener(
			window, 'load', initialize);
	</script>
</head>

<body>
	<div id="map-canvas" style="width: 400px; height: 300px"></div>
	<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
	<div id="panoInfo" style="width: 45%; height: 100%;float:left">
		<table>
			<tr>
				<td><b>Position</b>
				</td>
				<td id="position_cell"> </td>
			</tr>
			<tr>
				<td><b>POV Heading</b>
				</td>
				<td id="heading_cell">270</td>
			</tr>
			<tr>
				<td><b>POV Pitch</b>
				</td>
				<td id="pitch_cell">0.0</td>
			</tr>
			<tr>
				<td><b>Pano ID</b>
				</td>
				<td id="pano_cell"> </td>
			</tr>
			<table id="links_table"></table>
		</table>
	</div>
</body>

</html>




    저작자표시 (새창열림)

    댓글

    관련글

    맨 위로
전체 글 보기

티스토리툴바