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번째 이미지와 같이 마커와 함께 해당위치로 지도가 이동하게된다.
그래서 마커들을 클릭하면 각각의 위치명이 노출되는 간단한 기능이다.
※ 초기 실행시 기본위치(초기 위치는 원하는 위치로도 지정가능)
※ 마커클릭시 각각의 위치명 노출
여기까지 간단한 내용인데 혹시 수정할 부분있으면 알려주시고 도움이 되셨으면 좋겠습니다.