완숙의 블로그

[Django] Week 7-4 API Practice - Naver 지도 API 본문

Programing Language/Web_Django

[Django] Week 7-4 API Practice - Naver 지도 API

완숙 2019. 3. 12. 14:25

저번에 했던 구글 로그인 프로젝트에서 해보자.

 

실습

  1. 저번에 구글 서비스를 사용하기 위해서 id와 key값을 받아왔었는데,

    이번에도 똑같이 가져와야 한다!

    ncloud

    이 주소로 들어가자!

  2. 이런 창이 뜨고, 회원가입을 해주자.

    2019-03-08 4 23 09

  3. 다시 처음 배너로 돌아와서 서비스라는 배너를 클릭하자.

    2019-03-08 4 31 39

여기서 maps에 들어가자. Application service 에 있다.

  1. 들어가서 이용신청하기 누르자.

 

2019-03-08 4 34 23

 

여기서 어플리케이션 등록 클릭

  1. 어플리케이션 이름을 지어주자.

    나는 likelion1 으로 지었다.

    그리고 그중에서 web dynamic Map 을 선택해주자.

    2019-03-08 4 37 27

  2. 이 작업까지 했다면 밑에 어떤 웹서비스에 적용할 것인지

    환경등록을 해줘야 한다.

    2019-03-08 4 39 16

우리가 사용했던 로컬 웹주소를 적어주고 추가하자.

그리고 등록!

  1. 그럼 이렇게 소셜 로그인을 구현했을 때 처럼 정보가 뜨고,

    인증정보 탭이 있다.

 

2019-03-08 4 40 56

  1. 이 녀석을 누르면, client id, client secret 두 정보가 뜬다.

    2019-03-08 4 42 32

  2. 이 두 정보를 적어두자.

    그리고 이번에는 두번째, 서비스 구분을 클릭하자.

2019-03-08 4 44 13

  1. 그리고 들어간 창에서 다음의 링크를 타고 들어가자.

 

<img width="1024" alt="2019-03-08 4 45 15" src="https://user-images.githubusercontent.com/37871541/54014950-996c0e80-41c1-11e9-9901-0fa0c208531b.png">
  1. 여기에 이제 우리가 필요한 것들이 다 구비되어 있다!

 

<img width="1051" alt="2019-03-08 4 46 21" src="https://user-images.githubusercontent.com/37871541/54014986-b56fb000-41c1-11e9-93e7-f4739f9a41ee.png">

  1. 시작하기를 누르면, 이제 모든 코드들이 다 있을 거야.

    그중에서 가장 먼저보이는 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>


<h1>소셜 로그인을 해봐요!</h1>

<a href = "/accounts/signup">회원가입</a><br>

{% if user.is_authenticated %}
<a href = "/accounts/logout">로그아웃</a>
{{user.username}} 님이 로그인중

{% else %}
<a href=" {% provider_login_url 'google' %}">구글 로그인</a><br>
로그인 하셔야 합니다.

{% endif %}


<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>

    네이버에서 따온 코드 중 body 태그 안에 우리가 작성했던 걸 넣어주었다.

  2. 간단하게 설명하면,

    <div id="map" style="width:100%;height:400px;"></div> <!-- 이 부분이 지도! -->

    이 부분이 지도를 띄워주는 부분이 되는 것이고,

 

```html
<script>
var mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
};
</script>
```

이 부분의 뒤의 두 파라미터가 위도, 경도이다.

  1. 그전에, <head> 태그 부분의 <title> 밑부분,

    <head>
    <title>간단한 지도 표시하기</title>
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
</head>

    여기서, YOUR_CLIENT_ID로 된 부분에, 아까 저장했던 발급받은 아이디를 적으면 된다.

 

```html
<head>
    <title>간단한 지도 표시하기</title>
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=cvszxvnmu9"></script>
</head>
```

이렇게!
  1. 이러고 서버를 돌려보면!

 

<img width="1081" alt="2019-03-08 4 56 39" src="https://user-images.githubusercontent.com/37871541/54015480-26fc2e00-41c3-11e9-945a-88dd1475383f.png">

 

이렇게 예쁘게 뜬다!

  1. 근데 너무 지도가 크니까, 아까 html 에서 조정하자.

    <div id="map" style="width:50%;height:400px;"></div> <!-- 이 부분이 지도! -->

    너비를 반으로 줄이자.

  2. 그리고 너무 축척이 크게 되어 있으니까 좀 당겨서 default를 잡아보자.

    <script>
var mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 12		# 원래 10이었음
};

var map = new naver.maps.Map('map', mapOptions);
</script>

  3. 지도가 또 필요하면 아까 코드를 복사해서 붙여넣으면 된다.

    <!-- home.html -->

<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: 12
};

var mapOptions2 = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 12
};
    
var map = new naver.maps.Map('map', mapOptions);
var map = new naver.maps.Map('map2', mapOptions2);
</script>

 

다른 지도를 사용하니까 id 값을 바꿔주고, 

그 해당 지도에 다른 위도 경도가 필요하니 script 에서도 변수를 바꿔주고,

이 정보를 띄워달라할 때 파라미터도 해당되는 변수들로 바꿔준다.
  1. 여기까지 하면!

 

<img width="706" alt="2019-03-08 5 03 57" src="https://user-images.githubusercontent.com/37871541/54015803-2ca64380-41c4-11e9-800c-6c73b0243983.png">

 

바꿔준 항목들이 모두 적용되었다는 것을 확인 할 수 있다!

  1. 그럼 위도와 경도는 어떻게 알아낼 수 있을까?

    구글 검색 (...)

    구글 맵스에 가면 url에 뜬다.

    https://www.google.co.kr/maps/place/경희대학교+국제캠퍼스+Kyung+Hee+University+慶熙大學校/@37.2429501,127.0778994,17z/data=!3m1!4b1!4m5!3m4!1s0x357b44de2c7f3ddb:0x4c35e852f90f5520!8m2!3d37.2429501!4d127.0800934

    이 url 에서,

 

```
@37.2429501,127.0778994,17z
```

이 앞의 두 값이 각각 위도 경도 이다.

그래서 이 값을 넣어주면!

 

<img width="744" alt="2019-03-08 5 10 10" src="https://user-images.githubusercontent.com/37871541/54016041-09c85f00-41c5-11e9-925d-179ea1d7e888.png">

 

잘 뜬다!

  1. 이번에는 다른 기능을 한번 사용해보자.

    홈페이지에서 Example 탭을 누르면, 다른 기능들이 굉장히 많다.

 

<img width="1058" alt="2019-03-08 5 12 15" src="https://user-images.githubusercontent.com/37871541/54016143-54e27200-41c5-11e9-9691-abed2f9b2abf.png">

이중 마커나 정보옵션창을 가장 많이 사용하는데,

 

<img width="916" alt="2019-03-08 5 16 14" src="https://user-images.githubusercontent.com/37871541/54016366-fcf83b00-41c5-11e9-8e51-f0b9334b2763.png">

  1. 역시나 그냥 복사해서 붙여넣어주면 된다.

    <script> 태그 밑에 붙여주자.

    <script>
    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 | 공공,사회기관 &gt; 특별,광역시청<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>

 

기존의 script를 주석처리하고 붙여넣었다.

<img width="559" alt="2019-03-08 5 19 23" src="https://user-images.githubusercontent.com/37871541/54016448-5496a680-41c6-11e9-9c2c-b5f6186845f8.png">

  1. 지금은 서울 특별시로 되어있으니까 해당부분을 바꿔주자.

    <!-- home.html -->
<script>
var contentString = [
        '<div class="iw_inner">',
        '   <h3>원하는 장소 이름</h3>',
        '   <p>해당 주소 입력<br />',
        '       <img src="'+ HOME_PATH +'/img/example/hi-seoul.jpg" width="55" height="55" alt="서울시청" class="thumb" /><br />',
        '       02-120 | 공공,사회기관 &gt; 특별,광역시청<br />',
        '       <a href="http://www.seoul.go.kr" target="_blank">www.seoul.go.kr/</a>',
        '   </p>',
        '</div>'
    ].join('');
</script>

    이 부분을 바꿔주면 정보창이 바뀌고,

    아까 배운 부분을 바꾸면 위치가 바뀔 것!

  2. 가끔은 파이썬, html, css 이런거 말고도 필요하다.

    계속 배워야 겠쬬..(징글징글하다)

  3. 코드를 정리해보자.

    지금은 못하겠다,,완완0316

'Programing Language > Web_Django' 카테고리의 다른 글

[Django] Week 8-1 app 재사용 Theory  (0) 2019.03.12
[Django] Week 7.5 Thumbnail 만들기  (0) 2019.03.12
[Django] Week 7-3 API Theory - Naver 지도 API  (0) 2019.03.09
[Django] Week 7-2 Social Login - 구글 로그인 Practice, Tuple  (1) 2019.03.09
[Django] Week 7-1 Social Login Theory  (0) 2019.03.09
'Programing Language/Web_Django' Related Articles more
Comments