김서연 / Corona_Vaccination_Medical_Institution

Go to a project
Toggle navigation Toggle navigation pinning
Heo
9b3eea56 1 parent 66b9289e

kakao map html

Inline Side-by-side
Showing 4 changed files with 128 additions and 3 deletions
...@@ -9,7 +9,6 @@ app.set('views','./views') ...@@ -9,7 +9,6 @@ app.set('views','./views')
9 app.set('view engine','pug'); 9 app.set('view engine','pug');
10 app.use(express.static('public')); 10 app.use(express.static('public'));
11 11
12 -
13 //?page=페이지번호&?perPage=페이지당 데이터수 12 //?page=페이지번호&?perPage=페이지당 데이터수
14 const $base_url = `https://api.odcloud.kr/api/apnmOrg/v1/list`; 13 const $base_url = `https://api.odcloud.kr/api/apnmOrg/v1/list`;
15 const $key = '4US0H%2BXj%2BmS8IR4YL0%2BUb9H4CcbTr92QxhYULfOEz1DT%2BZaaos4sRfNh6cmAD2Icli862Ysc31%2BaE4pWywDBIA%3D%3D'; 14 const $key = '4US0H%2BXj%2BmS8IR4YL0%2BUb9H4CcbTr92QxhYULfOEz1DT%2BZaaos4sRfNh6cmAD2Icli862Ysc31%2BaE4pWywDBIA%3D%3D';
...@@ -37,9 +36,8 @@ app.post('/',function(req,res,next){ ...@@ -37,9 +36,8 @@ app.post('/',function(req,res,next){
37 }); 36 });
38 37
39 // console.log(searchList); 38 // console.log(searchList);
40 -
41 //result라는 변수에 담아 결과 보내기 39 //result라는 변수에 담아 결과 보내기
42 - res.render('main', {result:searchList}); 40 + res.render('main', {result:searchList, map:map });
43 }) 41 })
44 42
45 }) 43 })
...@@ -52,3 +50,4 @@ app.listen(3000,function(){ ...@@ -52,3 +50,4 @@ app.listen(3000,function(){
52 app.get('/',function(req,res){ 50 app.get('/',function(req,res){
53 res.render('main'); 51 res.render('main');
54 }) 52 })
53 +
......
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset="utf-8">
5 + <title>여러개 마커에 이벤트 등록하기1</title>
6 +
7 +</head>
8 +<body>
9 +<div id="map" style="width:700px;height:400px;"></div>
10 +
11 +<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988"></script>
12 +<script>
13 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
14 + mapOption = {
15 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
16 + level: 3 // 지도의 확대 레벨
17 + };
18 +
19 +var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
20 +
21 +// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
22 +var positions = [
23 + {
24 + content: '<div>카카오</div>',
25 + latlng: new kakao.maps.LatLng(33.450705, 126.570677)
26 + },
27 + {
28 + content: '<div>생태연못</div>',
29 + latlng: new kakao.maps.LatLng(33.450936, 126.569477)
30 + },
31 + {
32 + content: '<div>텃밭</div>',
33 + latlng: new kakao.maps.LatLng(33.450879, 126.569940)
34 + },
35 + {
36 + content: '<div>근린공원</div>',
37 + latlng: new kakao.maps.LatLng(33.451393, 126.570738)
38 + }
39 +];
40 +
41 +for (var i = 0; i < positions.length; i ++) {
42 + // 마커를 생성합니다
43 + var marker = new kakao.maps.Marker({
44 + map: map, // 마커를 표시할 지도
45 + position: positions[i].latlng // 마커의 위치
46 + });
47 +
48 + // 마커에 표시할 인포윈도우를 생성합니다
49 + var infowindow = new kakao.maps.InfoWindow({
50 + content: positions[i].content // 인포윈도우에 표시할 내용
51 + });
52 +
53 + // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
54 + // 이벤트 리스너로는 클로저를 만들어 등록합니다
55 + // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
56 + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
57 + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
58 +}
59 +
60 +// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
61 +function makeOverListener(map, marker, infowindow) {
62 + return function() {
63 + infowindow.open(map, marker);
64 + };
65 +}
66 +
67 +// 인포윈도우를 닫는 클로저를 만드는 함수입니다
68 +function makeOutListener(infowindow) {
69 + return function() {
70 + infowindow.close();
71 + };
72 +}
73 +</script>
74 +</body>
75 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset="utf-8">
5 + <title>주소로 장소 표시하기</title>
6 +
7 +</head>
8 +<body>
9 + <div id="map" style="width: 700px;height:400px;"></div>
10 +<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
11 +<script>
12 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
13 + mapOption = {
14 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
15 + level: 3 // 지도의 확대 레벨
16 + };
17 +
18 +// 지도를 생성합니다
19 +var map = new kakao.maps.Map(mapContainer, mapOption);
20 +
21 +// 주소-좌표 변환 객체를 생성합니다
22 +var geocoder = new kakao.maps.services.Geocoder();
23 +
24 +// 주소로 좌표를 검색합니다
25 +geocoder.addressSearch('경희대로26', function(result, status) {
26 +
27 + // 정상적으로 검색이 완료됐으면
28 + if (status === kakao.maps.services.Status.OK) {
29 +
30 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
31 +
32 + // 결과값으로 받은 위치를 마커로 표시합니다
33 + var marker = new kakao.maps.Marker({
34 + map: map,
35 + position: coords
36 + });
37 +
38 + // 인포윈도우로 장소에 대한 설명을 표시합니다
39 + var infowindow = new kakao.maps.InfoWindow({
40 + content: '<div style="width:150px;text-align:center;padding:6px 0;">기관명</div>'
41 + });
42 + infowindow.open(map, marker);
43 +
44 + // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
45 + map.setCenter(coords);
46 + }
47 +});
48 +</script>
49 +</body>
50 +</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
9 "author": "", 9 "author": "",
10 "license": "ISC", 10 "license": "ISC",
11 "dependencies": { 11 "dependencies": {
12 + "@google/maps": "^1.1.3",
12 "body-parser": "^1.19.0", 13 "body-parser": "^1.19.0",
13 "cheerio": "^1.0.0-rc.9", 14 "cheerio": "^1.0.0-rc.9",
14 "express": "^4.17.1", 15 "express": "^4.17.1",
......