네이버 위젯 만들기

Overview

Ask Django 커스텀 위젯 내용을 정리하였습니다.

Client ID : 7AST9ueXCn9a4GKjfOb2
Client Secret : 0jz1Bap6yX

Widget

• UI 입력 요소
• class Widget(attrs=None)
  • attrs : 해당 tag의 property 지정
  • self.attrs 를 통해 접근 가능

from django import forms
name = forms.TextInput(attrs={'size':10, 'title':'Your name',})
name.render('name','value',attrs=None)

# <input title='Your name' type='text' name='name' value='A name' size='10' required />

네이버맵 위도/경도 입력 위젯(NaverMapPointWidget)

• Naver Maps JavaScript API v3
• 오픈API이용신청을 통해 앱 등록 및 client id 발급
  "애플리케이션 이름" 입력 및 "카테고리" 선택
이용목적 : "비로그인 오픈 API" 체크
비로그인 오픈 API 서비스 환경
  • "지도" 체크
  • "웹 서비스 URL" 입력 : http://localhost:8000

naver_map_point_widget.py

import re
from django import forms
from django.conf import settings
from django.template.loader import render_to_string

class NaverMapPointWidget(forms.TextInput):
    BASE_LAT, BASE_LNG = '37.497921', '127.027636' # 강남역

    def render(self, name, value, attrs):
        width = str(self.attrs.get('width', 800))
        height = str(self.attrs.get('height', 800))
        if width.isdigit() : width += 'px'
        if height.isdigit() : height += 'px'

        context = {'naver_client_id' : settings.NAVER_CLIENT_ID,
                   'id':attrs['id'], # 현재 formfield의 html id
                   'width':width, 'height':height,
                   'base_lat':self.BASE_LAT, 'base_lng':self.BASE_LNG}

        if value:
            try:
                lng, lat = re.findall(r'[+-]?[\d\.]',value)
                context.update({'base_lat':lat, 'base_lng':lng})
            except (IndexError, ValueError):
                pass

        attrs['readonly'] = 'readonly'
        parent_html = super().render(name, value, attrs)

        html = render_to_string('widget/naver_map_point_widget.html', context)

        return parent_html + html

naver_map_point_widget.html

<script type='text/javascript' src='https://openapi.map.naver.com/openapi/v3/maps.js?clientId={{ naver_client_id }}'></script>
<style>
#naver_map_point_{{ id }}{
    width:{{ width }};
    height:{{ height }};
}
</style>

<div id="naver_map_point_{{ id }}"></div>

<script>
(function() {
    var base_point = new naver.maps.LatLng({{ base_lat }}, {{ base_lng }});

    var map = new naver.maps.Map(document.getElementById('naver_map_point_{{ id }}'), {
        center: base_point
    });

    var marker = new naver.maps.Marker({
        position : base_point,
        map : map
    });

    naver.maps.Event.addListener(map, 'click', function(e) {
        // 지도 한 부분이 클릭되면
        marker.setPosition(e.coord); // 해당 위치로 지도의 중심을 변경
        document.getElementById('{{ id }}').value = e.coord.lat()+', '+e.coord.lng(); // 본 widget에 "위도, 경도" 값 입력
    });
})();
</script>