728x90
Application Programmin Interface
인터페이스 : 연결지어주는 역할
오늘은 지도 api
특정지점의 ㅟ치 명시해보기
경로찾기, 위치검색도 할수있을거야 나중에
메르스 확산지도 (멋사출신) 이렇게 쓴거~
====실습====
접속하기
네이버 지도 가져올거임
구글 소셜로그인처럼 똑같이 id key값 가져올거야
2) 개인회원으로 회원가입, 결제수단 등록
3) 서비스 배너 클릭, maps 클릭
https://www.ncloud.com/product/applicationService/maps
이용신청하기
4) + apllication 등록 클릭
5) 이름 정하고
인증 정보에 id, key
클릭
7) 코드 복붙해보기
https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
- Hello World 코드 복사하고 home.html에 붙여넣기
{% load socialaccount %}
{% providers_media_js %}
전에 썼던 얘네는 맨위에 그대로 두고
<!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>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div> <!-- 지도 띄워주는 부분 -->
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);
</script>
</body>
</html>이렇게 복붙~~
your_client_id에 아까 발급받은 id 복붙하기
8) 지도 하나 더 추가하기
<div id="map" style="width:50%;height:400px;"></div>
<br>
<div id="map2" style="width:50%;height:400px;"></div>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 11
};
var mapOptions2 = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 11
};
var map = new naver.maps.Map('map', mapOptions);
var map = new naver.maps.Map('map2', mapOptions2);
</script>
빨간글씨 추가해주면됨
9) 위도와 경도는 구글검색으로 알아내기.
구글맵으로 원하는 장소 클릭하면 url에 위경도 나옴
10 ) 다른 예제
예제 모아보기 클릭
- 정보 창 표시하기 클릭
var HOME_PATH = window.HOME_PATH || '.';
var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147),
map = new naver.maps.Map('map', {
center: cityhall.destinationPoint(0, 500),
zoom: 10
}),
marker = new naver.maps.Marker({
map: map,
position: cityhall
});
var contentString = [
'<div class="iw_inner">',
' <h3>서울특별시청</h3>',
' <p>서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청<br />',
' <img src="'+ HOME_PATH +'/img/example/hi-seoul.jpg" width="55" height="55" alt="서울시청" class="thumb" /><br />',
' 02-120 | 공공,사회기관 > 특별,광역시청<br />',
' <a href="http://www.seoul.go.kr" target="_blank">www.seoul.go.kr/</a>',
' </p>',
'</div>'
].join('');
var infowindow = new naver.maps.InfoWindow({
content: contentString
});
naver.maps.Event.addListener(marker, "click", function(e) {
if (infowindow.getMap()) {
infowindow.close();
} else {
infowindow.open(map, marker);
}
});
infowindow.open(map, marker);이것을 <script> 안에 넣어주면 된다.
home_path에 이미지 static이나 media로 넣어줘도 되고~~
그런데, 모든 api가 복붙만으로 진행되는건 아니다.
그리고 코드 정리하기.
'Development > Django(멋쟁이사자처럼 7기 운영진)' 카테고리의 다른 글
| [멋사7기] 8주차 - 1, 2. app 재사용 이론, 실습 (0) | 2019.03.01 |
|---|---|
| [멋사7기] 7.5주차 - 썸네일 만들기 (0) | 2019.02.21 |
| [멋사7기] 7주차 - 1, 2. 소셜 로그인 이론, 실습 (Google) (0) | 2019.02.20 |
| [멋사7기] 6.5주차 - heroku에 배포하기 (0) | 2019.02.18 |
| [멋사7기] 6주차 - 1, 2. form 이론, 실습 (0) | 2019.02.17 |