<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>API</title>
<!--
외부의 기능을 가진 SW를 불러와서 사용
명세서
1) 외부작업자
2) 인수인계 및 유지보수 향상
3) 비전공자
맵 API
- 네이버
- 카카오
- 구글 - 실습
공공기관 API -> 공공 데이터를 분석 프로그램
사용법
내 프로젝트 --- API 사용 요청 --- API --- 인증키 발급 --- 키로 요청 --- 맵 API 이용가능
-->
<style type="text/css">
#pano{
width:100%;
height:45%;
}
* {
margin: 5px;
}
html, body{
height: 100%;
margin: 0;
padding: 0;
}
#map {
border: 2px solid blue;
width: 100%;
height: 45%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
}
</style>
<script
src="http://maps.google.com/maps/api/js?key=발급받은 인증키&지역"
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<button id="btn1">지도 변경1</button>
<!-- 지도 중심변경 -->
<button id="btn2">지도 변경2</button>
<!-- 새로운지도 로드 -->
<button id="btn3">지도 위성사진 45도</button>
<!-- 지도 45도 -->
<div id="iframe-contents">
<!-- btn3만 작동 - 45도씩 회전하는 기능-->
<input type="button" value="자동회전" id="rotate">
</div>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
btn1.addEventListener("click", changeMap1);
btn2.addEventListener("click", changeMap2);
btn3.addEventListener("click", changeMap3);
//구글지도가 올바르지 않습니다 라는 문구가 뜨면 key가 잘못되었거나, script에서 오타난것
var map;
function initMap() {
// 위치데이터 경도, 위도로 구성된 jso 파일은 항상 이런식으로 구성되어있다.
var ll = {
lat : 37.4527355,
lng : 126.9053652
};
map = new google.maps.Map(document.getElementById("map"), {
zoom : 17,
center : ll
});
var panorama = new google.maps.StreetViewPanorama(document
.getElementById("pano"), {
position : ll,
pov : {
heading : 34,
pitch : 10,
},
});
map.setStreetView(panorama);
}
initMap(); // 맵 생성
// 지도의 중심을 변경하는 작업(지도는 그대로)
function changeMap1() {
var ll = {
lat : 37.4527355,
lng : 126.9053652
}; // 지역변수
map.panTo(ll); // 새로운 위치에 대해 다시 띄워줘
map.setZoom(9);
}
// 새로운 지도를 로드 (지도 새로고침)
function changeMap2() {
var ll = {
lat : -40.339098,
lng : 175.609729
};
map = new google.maps.Map(document.getElementById("map"), {
zoom : 13,
center : ll
});
}
function changeMap3() {
var ll = {
lat : 40.76,
lng : -73.983
};
map = new google.maps.Map(document.getElementById("map"), {
center : ll,
zoom : 17,
map : map,
heading : 90,
tilt : 45,
} // zoom:지도 확대축소 기능(숫자가 클수록 확대 작을수로 축소)
);
map.setTilt(45);
document.getElementById("rotate").addEventListener("click",
autoRotate);
}
function rotate90() {
const heading = map.getHeading() || 0;
map.setHeading(heading + 90);
}
function autoRotate() {
// Determine if we're showing aerial imagery.
if (map.getTilt() !== 0) {
window.setInterval(rotate90, 3000);
}
}
</script>
</body>
</html>
