firemap/map.html at main · red112/firemap · GitHub

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Kakao 지도 시작하기</title>
</head>
<body>
	<div id="map" style="width:500px;height:400px;"></div>
	<button id="btnInfo">Get Info</button><br>
    <textarea id="mapInfo" rows="8" cols="70"></textarea>

	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=07d2c3a356d8de5c9e3b858db0aded78&libraries=services,clusterer,drawing"></script>
	<script>
		var container = document.getElementById('map');
		var options = {
			center: new kakao.maps.LatLng(35.68440141850241, 127.64369033659264),
			level: 14
		};

		var map = new kakao.maps.Map(container, options);
        // 주소-좌표 변환 객체를 생성합니다
        var geocoder = new kakao.maps.services.Geocoder();


        // 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
        var mapTypeControl = new kakao.maps.MapTypeControl();

        // 지도에 컨트롤을 추가해야 지도위에 표시됩니다
        // kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
        map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);

        // 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
        var zoomControl = new kakao.maps.ZoomControl();
        map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

        // 지도가 확대 또는 축소되면 마지막 파라미터로 넘어온 함수를 호출하도록 이벤트를 등록합니다
        kakao.maps.event.addListener(map, 'zoom_changed', updateMapInfo);
        kakao.maps.event.addListener(map, 'center_changed', updateMapInfo)


        var btnInfo = document.getElementById('btnInfo');
        var mapInfo = document.getElementById('mapInfo');

        btnInfo.onclick = function() { updateMapInfo();  };


        function updateMapInfo() {
            geocoder.coord2Address(map.getCenter().getLng(), map.getCenter().getLat(), getAddress);
        }

        function showMapInfo(address) {
            // 지도의 현재 중심좌표를 얻어옵니다
            var center = map.getCenter();

            // 지도의 현재 레벨을 얻어옵니다
            var level = map.getLevel();

            // 지도타입을 얻어옵니다
            var mapTypeId = map.getMapTypeId();

            // 지도의 현재 영역을 얻어옵니다
            var bounds = map.getBounds();

            // 영역의 남서쪽 좌표를 얻어옵니다
            var swLatLng = bounds.getSouthWest();

            // 영역의 북동쪽 좌표를 얻어옵니다
            var neLatLng = bounds.getNorthEast();

            // 영역정보를 문자열로 얻어옵니다. ((남,서), (북,동)) 형식입니다
            var boundsStr = bounds.toString();


            var message = '중심좌표(위도,경도) = [ ' + center.getLat() + ', ' + center.getLng() + ' ]\n';
            message += '지도 레벨 = ' + level + '\n';
            message += '지도 타입 = ' + mapTypeId + '\n';
            message += '지도의 남서쪽 꼭지점 = [ ' + swLatLng.getLat() + ', ' + swLatLng.getLng() + ' ]\n';
            message += '지도의 북동쪽 꼭지점 = [ ' + neLatLng.getLat() + ', ' + neLatLng.getLng() + ' ]\n';

            message += '주소 = ' + address;

            mapInfo.innerHTML = message;
        }

        //geocoding callback
        function getAddress(result, status) {
            var address = '';

            if (status === kakao.maps.services.Status.OK) {
                for(var i = 0; i < result.length; i++) {
                    // 행정동의 region_type 값은 'H' 이므로
                    address += result[i].address.address_name;
                }
            }

            showMapInfo(address);


        }

	</script>
</body>
</html>