Toggle navigation
Toggle navigation
This project
Loading...
Sign in
신원형
/
study-or-enjoy
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
1
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
최유정
2022-06-03 18:16:36 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
a805dba1ff9e5baf373f0f265396951493daea82
a805dba1
1 parent
9572636f
get static map img
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
20 additions
and
58 deletions
showmap.js
showmap.js
View file @
a805dba
//### csv 파일에서 정보를 읽어오고, 2차원 배열화
const
parse
=
require
(
"csv-parse/lib/sync"
);
const
fs
=
require
(
"fs"
);
var
locationx
;
var
locationy
;
var
location_name
;
const
csv
=
fs
.
readFileSync
(
"todolistdata.csv"
);
console
.
log
(
csv
.
toString
());
//parse 메서드 -> 2차원배열화
const
records
=
parse
(
csv
.
toString
());
const
addr
=
[]
for
(
var
i
=
0
;
i
<
records
.
length
;
i
++
){
for
(
var
j
=
0
;
j
<
records
[
i
].
length
;
j
++
){
addr
.
push
(
records
[
i
][
4
]);
// 이미지 지도에 표시할 마커입니다
// 이미지 지도에 표시할 마커를 아래와 같이 배열로 넣어주면 여러개의 마커를 표시할 수 있습니다
var
markers
=
[
{
position
:
new
kakao
.
maps
.
LatLng
(
locationx
,
locationy
)
},
{
position
:
new
kakao
.
maps
.
LatLng
(
locationx
,
locationy
),
text
:
'추천할 장소 : '
+
location_name
// text 옵션을 설정하면 마커 위에 텍스트를 함께 표시할 수 있습니다
}
console
.
log
(
addr
)
;
]
;
}
//------------------------------------------------------------------
//###주소로 장소 검색하기###
var
mapContainer
=
document
.
getElementById
(
'map'
),
// 지도를 표시할 div
mapOption
=
{
center
:
new
kakao
.
maps
.
LatLng
(
33.450701
,
126.570667
),
// 지도의 중심좌표
level
:
3
// 지도의 확대 레벨
var
staticMapContainer
=
document
.
getElementById
(
'staticMap'
),
// 이미지 지도를 표시할 div
staticMapOption
=
{
center
:
new
kakao
.
maps
.
LatLng
(
locationx
,
locationy
),
// 이미지 지도의 중심좌표
level
:
3
,
// 이미지 지도의 확대 레벨
marker
:
markers
// 이미지 지도에 표시할 마커
};
// 지도를 생성합니다
var
map
=
new
kakao
.
maps
.
Map
(
mapContainer
,
mapOption
);
// 주소-좌표 변환 객체를 생성합니다
var
geocoder
=
new
kakao
.
maps
.
services
.
Geocoder
();
// 찾을 주소
var
searchAddress
;
// 주소로 좌표를 검색합니다
geocoder
.
addressSearch
(
searchAddress
,
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
);
}
});
\ No newline at end of file
// 이미지 지도를 생성합니다
var
staticMap
=
new
kakao
.
maps
.
StaticMap
(
staticMapContainer
,
staticMapOption
);
\ No newline at end of file
...
...
Please
register
or
login
to post a comment