Showing
2 changed files
with
1 additions
and
140 deletions
kakao/kakaomap3.html
deleted
100644 → 0
1 | -<!DOCTYPE html> | ||
2 | -<html> | ||
3 | -<head> | ||
4 | - <meta charset="utf-8"> | ||
5 | - <title>다음 지도 API</title> | ||
6 | -</head> | ||
7 | -<body> | ||
8 | - <div id="map" style="width:750px;height:350px;"></div> | ||
9 | - | ||
10 | - <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=a21612f3bd7cf34230c238ce03ca482b"></script> | ||
11 | - <script> | ||
12 | - var mapContainer = document.getElementById('map'), // 지도를 표시할 div | ||
13 | - mapOption = { | ||
14 | - center: new kakao.maps.LatLng(37.56819, 126.98042), // 지도의 중심좌표 | ||
15 | - level: 2, // 지도의 확대 레벨 | ||
16 | - mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류 | ||
17 | - }; | ||
18 | - | ||
19 | - // 지도를 생성한다 | ||
20 | - var map = new kakao.maps.Map(mapContainer, mapOption); | ||
21 | - | ||
22 | - var marker = new kakao.maps.Marker({ | ||
23 | - position: new kakao.maps.LatLng(37.56756, 126.97927), // 마커의 좌표 | ||
24 | - map: map // 마커를 표시할 지도 객체 | ||
25 | - }); | ||
26 | - | ||
27 | - var iwContent = '<div style="padding: 5px">내용</div>' | ||
28 | - | ||
29 | - | ||
30 | - | ||
31 | - // 인포윈도우를 생성합니다 | ||
32 | - var infowindow = new kakao.maps.InfoWindow({ | ||
33 | - position : iwPosition, | ||
34 | - content : iwContent | ||
35 | - }); | ||
36 | - | ||
37 | - // 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다 | ||
38 | - infowindow.open(map, marker); | ||
39 | - | ||
40 | - // HTML5의 geolocation으로 사용할 수 있는지 확인합니다 | ||
41 | - if (navigator.geolocation) { | ||
42 | - navigator.geolocation.getCurrentPosition(function(position) { | ||
43 | - var lat = position.coords.latitude, // 위도 | ||
44 | - lon = position.coords.longitude; // 경도 | ||
45 | - var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다 | ||
46 | - message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다 | ||
47 | - | ||
48 | - // 마커와 인포윈도우를 표시합니다 | ||
49 | - displayMarker(locPosition, message); | ||
50 | - }); | ||
51 | - | ||
52 | - } | ||
53 | - | ||
54 | - else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다 | ||
55 | - var locPosition = new kakao.maps.LatLng(33.450701, 126.570667), | ||
56 | - message = 'geolocation을 사용할수 없어요..' | ||
57 | - displayMarker(locPosition, message); | ||
58 | - } | ||
59 | - | ||
60 | - var gps_use = null; //gps의 사용가능 여부 | ||
61 | - var gps_lat = null; // 위도 | ||
62 | - var gps_lng = null; // 경도 | ||
63 | - var gps_position; // gps 위치 객체 | ||
64 | - | ||
65 | - gps_check(); | ||
66 | - // gps가 이용가능한지 체크하는 함수이며, 이용가능하다면 show location 함수를 불러온다. | ||
67 | - // 만약 작동되지 않는다면 경고창을 띄우고, 에러가 있다면 errorHandler 함수를 불러온다. | ||
68 | - // timeout을 통해 시간제한을 둔다. | ||
69 | - function gps_check(){ | ||
70 | - if (navigator.geolocation) { | ||
71 | - var options = {timeout:60000}; | ||
72 | - navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options); | ||
73 | - } else { | ||
74 | - alert("GPS_추적이 불가합니다."); | ||
75 | - gps_use = false; | ||
76 | - } | ||
77 | - } | ||
78 | - | ||
79 | - | ||
80 | - // gps 이용 가능 시, 위도와 경도를 반환하는 showlocation함수. | ||
81 | - function showLocation(position) { | ||
82 | - gps_use = true; | ||
83 | - gps_lat = position.coords.latitude; | ||
84 | - gps_lng = position.coords.longitude; | ||
85 | - } | ||
86 | - | ||
87 | - | ||
88 | - // error발생 시 에러의 종류를 알려주는 함수. | ||
89 | - function errorHandler(error) { | ||
90 | - if(error.code == 1) { | ||
91 | - alert("접근차단"); | ||
92 | - } else if( err.code == 2) { | ||
93 | - alert("위치를 반환할 수 없습니다."); | ||
94 | - } | ||
95 | - gps_use = false; | ||
96 | - } | ||
97 | - | ||
98 | - function gps_tracking(){ | ||
99 | - if (gps_use) { | ||
100 | - map.panTo(new kakao.maps.LatLng(gps_lat,gps_lng)); | ||
101 | - var gps_content = '<div><img class="pulse" draggable="false" unselectable="on" src="https://ssl.pstatic.net/static/maps/m/pin_rd.png" alt=""></div>'; | ||
102 | - var currentOverlay = new kakao.maps.CustomOverlay({ | ||
103 | - position: new kakao.maps.LatLng(gps_lat,gps_lng), | ||
104 | - content: gps_content, | ||
105 | - map: map | ||
106 | - }); | ||
107 | - currentOverlay.setMap(map); | ||
108 | - } else { | ||
109 | - alert("접근차단하신 경우 새로고침, 아닌 경우 잠시만 기다려주세요."); | ||
110 | - gps_check(); | ||
111 | - } | ||
112 | - } | ||
113 | - | ||
114 | - | ||
115 | - // 지도에 마커와 인포윈도우를 표시하는 함수입니다 | ||
116 | - function displayMarker(locPosition, message) { | ||
117 | - // 마커를 생성합니다 | ||
118 | - var marker = new kakao.maps.Marker({ | ||
119 | - map: map, | ||
120 | - position: locPosition | ||
121 | - }); | ||
122 | - var iwContent = message, // 인포윈도우에 표시할 내용 | ||
123 | - iwRemoveable = true; | ||
124 | - | ||
125 | - // 인포윈도우를 생성합니다 | ||
126 | - var infowindow = new kakao.maps.InfoWindow({ | ||
127 | - content : iwContent, | ||
128 | - removable : iwRemoveable | ||
129 | - }); | ||
130 | - | ||
131 | - // 인포윈도우를 마커위에 표시합니다 | ||
132 | - infowindow.open(map, marker); | ||
133 | - | ||
134 | - // 지도 중심좌표를 접속위치로 변경합니다 | ||
135 | - map.setCenter(locPosition); | ||
136 | - } | ||
137 | - | ||
138 | - </script> | ||
139 | -</body> | ||
140 | -</html> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
... | @@ -18,6 +18,7 @@ app.get("/geolocation", function (req, res) { | ... | @@ -18,6 +18,7 @@ app.get("/geolocation", function (req, res) { |
18 | res.sendFile(path.join(__dirname + "/kakao/kakaomap.html")); | 18 | res.sendFile(path.join(__dirname + "/kakao/kakaomap.html")); |
19 | }); | 19 | }); |
20 | 20 | ||
21 | +//오류확인 | ||
21 | try { | 22 | try { |
22 | const option = { | 23 | const option = { |
23 | ca: fs.readFileSync("/etc/letsencrypt/live/" + domain + "/fullchain.pem"), | 24 | ca: fs.readFileSync("/etc/letsencrypt/live/" + domain + "/fullchain.pem"), | ... | ... |
-
Please register or login to post a comment