웹스쿨 - 일상, 커뮤니티, 무료사진, 유머, 재테크, 상식, 프로그램 개발, 홈페이지, 홈페이지제작, 웹사이트, 웹솔루션, 웹개발, php, java, javascript, html, css, c#, 파이썬, nodejs, react, mysql, 유머, 소통, 공부, 맛집, 생각, 개발, 개발자, 프로그래머, 감상, 영화, 음악, 로또, 상식, 무료사진, 프로그램개발, 일식, 한식, 중식, 분식, 양식, 일본맛집, 코인, 비트코인, 블록체인, 암호화폐, 업비트, 바이낸스, 이더리움, 리플, 에이다, 펀디엑스, NFT, 현지인맛집, 맛집추천, 로컬맛집, 맛집위치, tv속맛집위치, 일본맛집, 미국맛집, 하와이맛집, 영국맛집, 유럽맛집, 터키맛집, 추천맛칩위치, 맛집유튜브, 호텔유튜브, 호캉스, 호텔추천, 추천숙소, 호텔영상, 놀이공원리뷰, 놀이공원영상, 놀이공원추천>개발 경험 Tip>Javascript - 다음 카카오 지도(Daum KaKao Map API) API 기본소스코드

웹스쿨

개발 경험 Tip Javascript

다음 카카오 지도(Daum KaKao Map API) API 기본소스코드

마스터욱 0 19 0 0 2019-05-18 05:28:31

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
<div id="map" style="width:100%;height:400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=지도키&libraries=services"></script>
<script>
    var container = document.getElementById('map');
    var options = {
        center: new daum.maps.LatLng(33.450701, 126.570667),
        level: 3,
        //mapTypeId: daum.maps.MapTypeId.SKYVIEW,
    };
 
    var map = new daum.maps.Map(container, options);
 
    // 주소-좌표 변환 객체를 생성합니다
    var geocoder = new daum.maps.services.Geocoder();
 
    // 주소로 좌표를 검색합니다
    geocoder.addressSearch("주소", function(result, status) {
 
        // 정상적으로 검색이 완료됐으면 
        //console.log(status);
         if (status === daum.maps.services.Status.OK) {
 
            var coords = new daum.maps.LatLng(result[0].y, result[0].x);
 
            // 결과값으로 받은 위치를 마커로 표시합니다
            var marker = new daum.maps.Marker({
                map: map,
                position: coords
            });
 
            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
            map.setCenter(coords);
        } 
    });    
 
</script>
Colored by Color Scripter
cs