다음 주소 api사용하기
<h2>1. 다음 (카카오) 주소 찾기 API</h2>
<input type="text" id="postCode" placeholder="우편번호">
<input type="button" id="" onclick="addrSearch()" value="우편번호 찾기">
<br>
<input type="text" id="roadAddr" placeholder="도로명주소">
<input type="text" id="jibunAddr" placeholder="지번주소">
<input type="text" id="detailAddr" placeholder="상세주소"><script
src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function addrSearch() {
new daum.Postcode({
oncomplete : function(data) {
document.querySelector('#postCode').value=data.zonecode;
document.querySelector('#roadAddr').value=data.roadAddress;
document.querySelector('#jibunAddr').value=data.jibunAddress;
}
}).open();
}
</script>- 해당 함수를 만들어 받아온 data에 data.키값을 이용하여 원하는 값을 전달할수있다
- 참고 : Daum Postcode Service User Guide
네이버 지도 api사용하기
- 네이버는 우선 NAVER CLOUD PLATFORM 네이버 클라우드 플랫폼 (ncloud.com)에 가입하고 카드 인증을 해야 한다
- 돈을 청구하진 않는다고 한다
- https://console.ncloud.com/ 에 접속해서 service - **AI·NAVER API**를 선택한다
- 메뉴에 생긴 **AI·NAVER AP**I를 선택하면 application을 누르고 서비스를 신청할수있다.
- aplication등록을 누르고 이름을 설정 한 뒤 필요한 지도 메뉴만 선택해 사용할 도메인의 절대 주소를 등록한다.
- 인증정보를 눌러 필요한 키를 복사해 사용한다
- 여기에서는 Web Dynamic Map (일반지도) Reverse Geocoding(지역코드 할당)을 선택했다
<script type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=할당받은ID&submodules=geocoder"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 400px;"></div>submodules=geocoder 를 삽입해주어야 해당 코드를 사용할수 있다.
var mapOptions = {
center : new naver.maps.LatLng(37.5556, 127.0057), //지도 좌표 설정
zoom : 75, //지도의 초기 줌 레벨
zoomControl : true, //컨트롤러 켜기
zommControlOptions : {
position : naver.maps.Position.TOP_RIGHT,
style : naver.maps.ZoomControlStyle.SMALL
}
};
- 자바스크립트에 해당 스크립트를 입력해준다.
- ()속에 원하는 좌표를 설정한다, 구글지도 - 원하는 장소- 주변검색을 클릭하면 좌표를 알수있다.
- Zoom:의 숫자가 클수록 해당 영역이 줌이 된다
- zoomContoller true를 하면 줌 컨트롤러가 보인다
- 포지션과 스타일로 컨트롤러의 형태를 변경할수있다.
var map = new naver.maps.Map('map', mapOptions);
var marker = new naver.maps.Marker({
position : new naver.maps.LatLng(37.5556, 127.0057),
map : map
}) //지도에 마커찍기- 해당 좌표의 지도에 마커를 찍을수있다. 변수명은 네이버지도에서 정한것이기때문에 가능한 바꾸지 않는게 좋다.
지도에 정보창 띄우기
var contentStr = "";
//지도에 정보창 띄우기
var infowindow = new naver.maps.InfoWindow({ //인포 윈도우 만들기
content : contentStr
});
infowindow.open(map, marker)//인포윈도우 열기
naver.maps.Event.addListener(marker, "click", function(e) {//인포윈도우 키고 닫기
if (infowindow.getMap()) {
infowindow.close();
} else {
infowindow = new naver.maps.InfoWindow({//인포윈도우 새로 만들기
content : contentStr //contentStr 값으로 content값 지정
});
infowindow.open(map, marker);//인포윈도우 열기
}
})
naver.maps.Event.addListener(map, "click", function(e) { //클릭할때마다 그 곳으로 마커가 변하는 함수
marker.setPosition(e.coord) //클릭한 곳의 좌표 코드
if (infowindow.getMap()) {//만약 인포윈도우가 켜져있다면
infowindow.close(); //닫아라
}
naver.maps.Service.reverseGeocode({// Geocode로 주소 가져오기
location : new naver.maps.LatLng(e.coord.lat(),e.coord.lng())
}, function(status, response){
var data = response.result;
var items=data.items;
var address = items[1].address;//주소값
contentStr = "<div><p>"+address+"</p></div>"; // 주소값 str으로 만들기
})
})- 좌표를 새로 지정할때마다 인포 윈도우도 새로 만들어줘야 한다.
naver.maps.Event.addListener(marker, "click", function(e) {//인포윈도우 키고 닫기 if (infowindow.getMap()) { infowindow.close(); } else { infowindow = new naver.maps.InfoWindow({//인포윈도우 새로 만들기 content : contentStr //contentStr 값으로 content값 지정 }); infowindow.open(map, marker);//인포윈도우 열기 } })- 여기에서 클릭이벤트로 마커를 클릭할때 새 인포윈도우를 만들어 윈도우의 값이 변하게 하였다.
naver.maps.Service.reverseGeocode({// Geocode로 주소 가져오기 location : new naver.maps.LatLng(e.coord.lat(),e.coord.lng()) }, function(status, response){ var data = response.result; var items=data.items; var address = items[1].address;//주소값 contentStr = "<div><p>"+address+"</p></div>"; // 주소값 str으로 만들기 })- 변한 윈도우의 값은 해당 스크립트에서 자동으로 읽어들인다.
- 여기에서 클릭이벤트로 마커를 클릭할때 새 인포윈도우를 만들어 윈도우의 값이 변하게 하였다.
- 클릭한곳으로 마커거 이동하는 스크립트는
naver.maps.Event.addListener(map, "click", function(e) { //클릭할때마다 그 곳으로 마커가 변하는 함수 marker.setPosition(e.coord) //클릭한 곳의 좌표 코드 설정 if (infowindow.getMap()) {//만약 인포윈도우가 켜져있다면 infowindow.close(); //닫아라 }- 맵을 클릭하면 연결되는 함수로 만들수있다,. e.coord가 클릭한 곳의 좌표이다.
hello world