[DAUM API] DAUM 지도 API 화면띄우기, 간단한 검색 예제
OPEN API인 다음 지도API를 간단히 사용해봤습니다.
우선 기본 지도 띄우기와 검색하여 마커로 위치정보를 찍는 부분까지 진행해 보겠습니다.
이정도까지가 지도API에 기본적인 부분이라고 생각해서 여기까지 진행했습니다.
이 글을 보지않아도 DAUM API센터에 설명이 무척 자세히 되어있지만, 그래도 필요하신 분은 참고가 되시면 좋겠습니다.
일단 API를 사용하려면 KEY를 발급받아야한다. 아래 링크에서 진행하시면 됩니다.
카카오 개발자센터 링크 : https://developers.kakao.com/
사이트에 들어가 로그인을 한후 내 애플리케이션을 클릭하고 들어가면 된다.
내 애플리케이션 페이지에 들어오면 앱만들기를 할 수 있다. 여기서 앱 만들기를 클릭해서 앱을 만들면 된다.
앱을 성공적으로 만들면 플랫폼을 선택해줘야 하는데, 일단 웹만 적용할 것임으로 웹만 선택하여 진행하였다.
아래의 이미지는 테스트용으로 간단히 만든것이라서 신경쓰지 마시고, 사용자의 환경에 맞게 세팅해주시면 될 것 같습니다.
여기까지 하면 지도 API를 사용하기 위한 준비가 끝났습니다. 이제 코드만 작성하면 되겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<body>
<input type="text" id="searchLoc">
<button onclick="searchLocation();">검색</button>
<div id="map" style="width: 500px; height: 400px;"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 appkey사용&libraries=services"></script>
<script type="text/javascript">
var ps = new daum.maps.services.Places();
//마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
var infowindow = new daum.maps.InfoWindow({zIndex:1});
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new daum.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new daum.maps.Map(container, options); //지도 생성 및 객체 리턴
function searchLocation(){
// 장소 검색 객체를 생성합니다
var loc = $("#searchLoc").val();
ps.keywordSearch(loc, placesSearchCB);
}
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB (data, status, pagination) {
if (status === daum.maps.services.Status.OK) {
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
var bounds = new daum.maps.LatLngBounds();
for (var i=0; i<data.length; i++) {
displayMarker(data[i]);
bounds.extend(new daum.maps.LatLng(data[i].y, data[i].x));
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
}
// 지도에 마커를 표시하는 함수입니다
function displayMarker(place) {
// 마커를 생성하고 지도에 표시합니다
var marker = new daum.maps.Marker({
map: map,
position: new daum.maps.LatLng(place.y, place.x)
});
// 마커에 클릭이벤트를 등록합니다
daum.maps.event.addListener(marker, 'click', function() {
// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
infowindow.open(map, marker);
});
}
<script>
|
cs |
UI는 신경쓰지 않고 기능만 되도록 만드는데 중점을 두었기에 이부분은 이해해주셨으면 좋겠습니다.
일단 기본페이지는 카카오본사 위치를 찍어놓은 듯 합니다. 거기에서 내가 원하는 곳을 검색하면
2번째 이미지와 같이 마커와 함께 해당위치로 지도가 이동하게된다.
그래서 마커들을 클릭하면 각각의 위치명이 노출되는 간단한 기능이다.
※ 초기 실행시 기본위치(초기 위치는 원하는 위치로도 지정가능)
※ 마커클릭시 각각의 위치명 노출
여기까지 간단한 내용인데 혹시 수정할 부분있으면 알려주시고 도움이 되셨으면 좋겠습니다.