google API 스트릿뷰 Street View
Open API/Google2016. 11. 22. 16:30
반응형
스트릿뷰 샘플 소스입니다..
회사 앞으로 찾아봤는데 잘 나오네요
기본형에다가 해당 위경도 , 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>
댓글()
