WayFindingProject/main.html at master · choco0908/WayFindingProject · 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
    <head>
    <script>
    function check(){
        var lat = document.getElementById('lat');
        if(lat.value == '' || lat.value == null){
            alert('목적지를 선택해주세요');
            return false;
        }

        return true;
    }
    </script>
    <title>WayFinding</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <link rel="stylesheet" href="/stylesheets/map.css">
    <link rel="stylesheet" href="/stylesheets/index.css">
    <body>
        <h1 align="center" >AR로 위치 찾기</h1>
        <div class='container'>
            <div class="map_wrap">
                <div id="map" style="width:100%;height:600px;position:block;"></div>
                <div class="hAddr">
                    <span id="centerAddr"></span>
                </div>
            </div>
            <form action="/WayFinding" onsubmit="return check()" method="get">
                <input type="hidden" name="name" id="name">
                <input type="hidden" name="lat" id="lat">
                <input type="hidden" name="lng" id="lng">
                <input type="hidden" name="kind" value="kakao">
                <input class="submit_css" type="submit" value="page move">
            </form>

        </div>


        <!-- kakao map API 연동 -->
        <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=73f2cfbc75f5036d8e88a7d4d6eb0f75&libraries=services"></script>
        <script>
        var Lat = 37.5001025;
        var Lng = 127.0938982;
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(function(position) {
                Lat = position.coords.latitude;
                Lng = position.coords.longitude;

                var mapContainer = document.getElementById('map'), // 지도를 표시할 div
                mapOption = {
                    center: new kakao.maps.LatLng(Lat,Lng), // 지도의 중심좌표
                    level: 3 // 지도의 확대 레벨
                };


                // 지도를 생성합니다
                var map = new kakao.maps.Map(mapContainer, mapOption);

                // 현재 위치 마커에 표시합니다.
                var markerPosition  = new kakao.maps.LatLng(Lat, Lng);
                // 마커를 생성합니다
                var marker = new kakao.maps.Marker({
                    position: markerPosition
                });

                // 마커가 지도 위에 표시되도록 설정합니다
                marker.setMap(map);

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

                marker = new kakao.maps.Marker(), // 클릭한 위치를 표시할 마커입니다
                    infowindow = new kakao.maps.InfoWindow({zindex:1}); // 클릭한 위치에 대한 주소를 표시할 인포윈도우입니다


                // 현재 지도 중심좌표로 주소를 검색해서 지도 좌측 상단에 표시합니다
                searchAddrFromCoords(map.getCenter(), displayCenterInfo);

                // 지도를 클릭했을 때 클릭 위치 좌표에 대한 주소정보를 표시하도록 이벤트를 등록합니다
                kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
                    searchDetailAddrFromCoords(mouseEvent.latLng, function(result, status) {
                        if (status === kakao.maps.services.Status.OK) {
                            var detailAddr = !!result[0].road_address ? '<div>도로명주소 : ' + result[0].road_address.address_name + '</div>' : '';
                            detailAddr += '<div>지번 주소 : ' + result[0].address.address_name + '</div>';

                            var content = '<div class="bAddr">' +
                                            '<span class="title">주소정보</span>' +
                                            detailAddr +
                                        '</div>';

                            // 마커를 클릭한 위치에 표시합니다
                            document.getElementById('lat').value = mouseEvent.latLng.Ha;
                            document.getElementById('lng').value = mouseEvent.latLng.Ga;
                            document.getElementById('name').value = result[0].address.address_name;

                            marker.setPosition(mouseEvent.latLng);
                            marker.setMap(map);

                            // 인포윈도우에 클릭한 위치에 대한 법정동 상세 주소정보를 표시합니다
                            infowindow.setContent(content);
                            infowindow.open(map, marker);
                        }
                    });
                });

                // 중심 좌표나 확대 수준이 변경됐을 때 지도 중심 좌표에 대한 주소 정보를 표시하도록 이벤트를 등록합니다
                kakao.maps.event.addListener(map, 'idle', function() {
                    searchAddrFromCoords(map.getCenter(), displayCenterInfo);
                });

                function searchAddrFromCoords(coords, callback) {
                    // 좌표로 행정동 주소 정보를 요청합니다
                    geocoder.coord2RegionCode(coords.getLng(), coords.getLat(), callback);
                }

                function searchDetailAddrFromCoords(coords, callback) {
                    // 좌표로 법정동 상세 주소 정보를 요청합니다
                    geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
                }

                // 지도 좌측상단에 지도 중심좌표에 대한 주소정보를 표출하는 함수입니다
                function displayCenterInfo(result, status) {
                    if (status === kakao.maps.services.Status.OK) {
                        var infoDiv = document.getElementById('centerAddr');

                        for(var i = 0; i < result.length; i++) {
                            // 행정동의 region_type 값은 'H' 이므로
                            if (result[i].region_type === 'H') {
                                infoDiv.innerHTML = result[i].address_name;
                                break;
                            }
                        }
                    }
                }
            });
        }
        </script>

    </body>
</html>