네이버 지도 API 사용하기
네이버에서 제공하는 네이버 지도 오픈 API
플랫폼에서 로그인 후 어플리케이션에서 map으로 들어가거나 아래 링크 로 들어가기
// 네이버 클라우드 플랫폼
https://www.ncloud.com/
// 네이버 지도 API링크
https://www.ncloud.com/product/applicationService/maps이용 시작하기 => 어플리케이션 등록
설정 입력하기
- 어플리케이션 이름
- Maps : Web Dynamic Map와 Geocoding 체크
- Web 서비스 URL : http://localhost:5000 입력 후 '+ 추가' 버튼 클릭(추가한 사이트에서만 API사용 가능)
- 입력 완료 후 '등록' 클릭
코드 작업전 설정 완료!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>간단한 지도 표시하기</title>
<script type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
<script>
$(document).ready(function () {
let map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.4981125, 127.0379399),
zoom: 10
});
})
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>※ 네이버 지도 관련 자바스크립트 파일 주소 중 YOUR_CLIENT_ID 부분에 콘솔에서 확인한 인증 정보를 넣어야합니다.
설정완료하고 내가 만든 이름 아래 인증정보를 누르면 CLIENT_ID 가 있음 그걸 넣어주어야함
지도의 확대 축소 버튼
let map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.4981125, 127.0379399),
zoom: 10,
// 아래부분이 확대 축소 버튼
zoomControl: true,
zoomControlOptions: {
style: naver.maps.ZoomControlStyle.SMALL,
position: naver.maps.Position.TOP_RIGHT
}
//
});지도에 마커 띄우기
지도에 마커를 띄우기 위해서는 marker 오브젝트를 만들어주어야 함
marker를 얹을 지도(map)와 경위도 좌표를 명시
let marker = new naver.maps.Marker({
position: new naver.maps.LatLng(37.4981125, 127.0379399),
map: map
// 마커 이미지 바꾸기
icon: "{{ url_for('static', filename='rtan_heart.png') }}"
});정보창 띄우고 닫기
let infowindow = new naver.maps.InfoWindow({
content: `<div style="width: 50px;height: 20px;text-align: center"><h5>안녕!</h5></div>`,
});
//마커를 누를때 마다 정보창 띄우고 / 닫기
naver.maps.Event.addListener(marker, "click", function () {
console.log(infowindow.getMap()); // 정보창이 열려있을 때는 연결된 지도를 반환하고 닫혀있을 때는 null을 반환
if (infowindow.getMap()) {
infowindow.close();
} else {
infowindow.open(map, marker);
}
});
이정도면 기본적인 지도 API 사용은 가능할것 같다
네이버 지도 기술문서
https://navermaps.github.io/maps.js.ncp/docs/
'coding > JS' 카테고리의 다른 글
| 배열과 유사 배열 객체 (0) | 2022.08.01 |
|---|---|
| js 객체 비구조화 할당 (0) | 2022.07.29 |
| rest API PUT/PATCH/POST (0) | 2022.07.27 |
| for in / for of (0) | 2022.07.27 |
| slice()와 splice() 차이 (0) | 2022.07.19 |