Toggle navigation
Toggle navigation
This project
Loading...
Sign in
김서연
/
Corona_Vaccination_Medical_Institution
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
3
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
김서연
2021-05-20 21:47:49 +0900
Browse Files
Options
Browse Files
Download
Plain Diff
Commit
a316ded10fd2369d4e810e04f9136b63dacbdeb0
a316ded1
2 parents
66b9289e
9b3eea56
Merge branch 'integrated
#1
_hjk' into 'integrated
#1
'
kakao map html See merge request
!3
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
129 additions
and
4 deletions
app.js
map/kakaomap.html
map/map.html
package.json
app.js
View file @
a316ded
...
...
@@ -9,7 +9,6 @@ app.set('views','./views')
app
.
set
(
'view engine'
,
'pug'
);
app
.
use
(
express
.
static
(
'public'
));
//?page=페이지번호&?perPage=페이지당 데이터수
const
$base_url
=
`https://api.odcloud.kr/api/apnmOrg/v1/list`
;
const
$key
=
'4US0H%2BXj%2BmS8IR4YL0%2BUb9H4CcbTr92QxhYULfOEz1DT%2BZaaos4sRfNh6cmAD2Icli862Ysc31%2BaE4pWywDBIA%3D%3D'
;
...
...
@@ -37,9 +36,8 @@ app.post('/',function(req,res,next){
});
// console.log(searchList);
//result라는 변수에 담아 결과 보내기
res
.
render
(
'main'
,
{
result
:
searchList
});
res
.
render
(
'main'
,
{
result
:
searchList
,
map
:
map
});
})
})
...
...
@@ -51,4 +49,5 @@ app.listen(3000,function(){
app
.
get
(
'/'
,
function
(
req
,
res
){
res
.
render
(
'main'
);
})
\ No newline at end of file
})
...
...
map/kakaomap.html
0 → 100644
View file @
a316ded
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
>
<title>
여러개 마커에 이벤트 등록하기1
</title>
</head>
<body>
<div
id=
"map"
style=
"width:700px;height:400px;"
></div>
<script
type=
"text/javascript"
src=
"https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988"
></script>
<script>
var
mapContainer
=
document
.
getElementById
(
'map'
),
// 지도를 표시할 div
mapOption
=
{
center
:
new
kakao
.
maps
.
LatLng
(
33.450701
,
126.570667
),
// 지도의 중심좌표
level
:
3
// 지도의 확대 레벨
};
var
map
=
new
kakao
.
maps
.
Map
(
mapContainer
,
mapOption
);
// 지도를 생성합니다
// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
var
positions
=
[
{
content
:
'<div>카카오</div>'
,
latlng
:
new
kakao
.
maps
.
LatLng
(
33.450705
,
126.570677
)
},
{
content
:
'<div>생태연못</div>'
,
latlng
:
new
kakao
.
maps
.
LatLng
(
33.450936
,
126.569477
)
},
{
content
:
'<div>텃밭</div>'
,
latlng
:
new
kakao
.
maps
.
LatLng
(
33.450879
,
126.569940
)
},
{
content
:
'<div>근린공원</div>'
,
latlng
:
new
kakao
.
maps
.
LatLng
(
33.451393
,
126.570738
)
}
];
for
(
var
i
=
0
;
i
<
positions
.
length
;
i
++
)
{
// 마커를 생성합니다
var
marker
=
new
kakao
.
maps
.
Marker
({
map
:
map
,
// 마커를 표시할 지도
position
:
positions
[
i
].
latlng
// 마커의 위치
});
// 마커에 표시할 인포윈도우를 생성합니다
var
infowindow
=
new
kakao
.
maps
.
InfoWindow
({
content
:
positions
[
i
].
content
// 인포윈도우에 표시할 내용
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao
.
maps
.
event
.
addListener
(
marker
,
'mouseover'
,
makeOverListener
(
map
,
marker
,
infowindow
));
kakao
.
maps
.
event
.
addListener
(
marker
,
'mouseout'
,
makeOutListener
(
infowindow
));
}
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function
makeOverListener
(
map
,
marker
,
infowindow
)
{
return
function
()
{
infowindow
.
open
(
map
,
marker
);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function
makeOutListener
(
infowindow
)
{
return
function
()
{
infowindow
.
close
();
};
}
</script>
</body>
</html>
\ No newline at end of file
map/map.html
0 → 100644
View file @
a316ded
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
>
<title>
주소로 장소 표시하기
</title>
</head>
<body>
<div
id=
"map"
style=
"width: 700px;height:400px;"
></div>
<script
type=
"text/javascript"
src=
"https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"
></script>
<script>
var
mapContainer
=
document
.
getElementById
(
'map'
),
// 지도를 표시할 div
mapOption
=
{
center
:
new
kakao
.
maps
.
LatLng
(
33.450701
,
126.570667
),
// 지도의 중심좌표
level
:
3
// 지도의 확대 레벨
};
// 지도를 생성합니다
var
map
=
new
kakao
.
maps
.
Map
(
mapContainer
,
mapOption
);
// 주소-좌표 변환 객체를 생성합니다
var
geocoder
=
new
kakao
.
maps
.
services
.
Geocoder
();
// 주소로 좌표를 검색합니다
geocoder
.
addressSearch
(
'경희대로26'
,
function
(
result
,
status
)
{
// 정상적으로 검색이 완료됐으면
if
(
status
===
kakao
.
maps
.
services
.
Status
.
OK
)
{
var
coords
=
new
kakao
.
maps
.
LatLng
(
result
[
0
].
y
,
result
[
0
].
x
);
// 결과값으로 받은 위치를 마커로 표시합니다
var
marker
=
new
kakao
.
maps
.
Marker
({
map
:
map
,
position
:
coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var
infowindow
=
new
kakao
.
maps
.
InfoWindow
({
content
:
'<div style="width:150px;text-align:center;padding:6px 0;">기관명</div>'
});
infowindow
.
open
(
map
,
marker
);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map
.
setCenter
(
coords
);
}
});
</script>
</body>
</html>
\ No newline at end of file
package.json
View file @
a316ded
...
...
@@ -9,6 +9,7 @@
"author"
:
""
,
"license"
:
"ISC"
,
"dependencies"
:
{
"@google/maps"
:
"^1.1.3"
,
"body-parser"
:
"^1.19.0"
,
"cheerio"
:
"^1.0.0-rc.9"
,
"express"
:
"^4.17.1"
,
...
...
Please
register
or
login
to post a comment