Toggle navigation
Toggle navigation
This project
Loading...
Sign in
이유제
/
CultureGallery
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
송효섭
2020-12-05 06:09:22 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
520ad2a1d6a0da7a866617537709a2bb9459b310
520ad2a1
1 parent
cc331c3c
mysqltest 브랜치 생성 -> 업데이트 예정
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
55 additions
and
48 deletions
map_sql/map_sql.html
map_sql/study.js
map_sql/map_sql.html
View file @
520ad2a
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
>
<title>
geolocation으로 마커 표시하기
</title>
</head>
<body>
<p
style=
"margin-top:-12px"
>
<p
style=
"margin-top:-12px"
>
<b>
Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.
</b>
참고해주세요.
</p>
<div
id=
"map"
style=
"width:500px;height:350px;"
></div>
</p>
<div
id=
"map"
style=
"width:500px;height:350px;"
></div>
<script
type=
"text/javascript"
src=
"//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"
>
//kakao map api 주소 받아옴
</script>
<
script>
const
near
=
require
(
'study.js'
);
<script
type=
"text/javascript"
src=
"//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c"
>
//kakao map api 주소 받아옴
</
script>
<script>
var
mapContainer
=
document
.
getElementById
(
'map'
),
// 지도를 표시할 div
const
near
=
require
(
'study.js'
);
var
mapContainer
=
document
.
getElementById
(
'map'
),
// 지도를 표시할 div
mapOption
=
{
center
:
new
kakao
.
maps
.
LatLng
(
33.450701
,
126.570667
),
// 지도의 중심좌표
level
:
10
// 지도의 확대 레벨
};
var
map
=
new
kakao
.
maps
.
Map
(
mapContainer
,
mapOption
);
// 지도를 생성합니다
var
map
=
new
kakao
.
maps
.
Map
(
mapContainer
,
mapOption
);
// 지도를 생성합니다
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if
(
navigator
.
geolocation
)
{
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if
(
navigator
.
geolocation
)
{
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator
.
geolocation
.
getCurrentPosition
(
function
(
position
)
{
navigator
.
geolocation
.
getCurrentPosition
(
function
(
position
)
{
var
lat
=
position
.
coords
.
latitude
,
// 위도
lon
=
position
.
coords
.
longitude
;
// 경도
...
...
@@ -41,27 +45,29 @@ if (navigator.geolocation) {
});
}
else
{
// HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
}
else
{
// HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var
locPosition
=
new
kakao
.
maps
.
LatLng
(
33.450701
,
126.570667
),
message
=
'geolocation을 사용할수 없어요..'
displayMarker
(
locPosition
,
message
);
}
}
displayShows
();
function
displayShows
()
{
displayShows
();
function
displayShows
()
{
var
imageSrc
=
"https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"
;
var
near_list
=
near
(
lat
,
lon
);
var
positions
=
[];
for
(
var
i
=
0
;
i
<
near_list
.
length
;
i
++
){
positions
.
push
({
title
:
id
,
lating
:
new
kaka0
.
maps
.
Lating
(
near_list
[
i
][
1
],
near_list
[
i
][
2
])})
var
near_list
=
near
(
lat
,
lon
);
var
positions
=
[];
for
(
var
i
=
0
;
i
<
near_list
.
length
;
i
++
)
{
positions
.
push
({
title
:
id
,
lating
:
new
kakao
.
maps
.
Lating
(
near_list
[
i
][
1
],
near_list
[
i
][
2
])
})
}
for
(
var
i
=
0
;
i
<
positions
.
length
;
i
++
)
{
for
(
var
i
=
0
;
i
<
positions
.
length
;
i
++
)
{
// 마커 이미지의 이미지 크기 입니다
var
imageSize
=
new
kakao
.
maps
.
Size
(
24
,
35
);
...
...
@@ -73,13 +79,13 @@ for (var i = 0; i < positions.length; i ++) {
var
marker
=
new
kakao
.
maps
.
Marker
({
map
:
map
,
// 마커를 표시할 지도
position
:
positions
[
i
].
latlng
,
// 마커를 표시할 위치
title
:
positions
[
i
].
title
,
// 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image
:
markerImage
// 마커 이미지
title
:
positions
[
i
].
title
,
// 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image
:
markerImage
// 마커 이미지
});
}
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function
displayMarker
(
locPosition
,
message
)
{
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function
displayMarker
(
locPosition
,
message
)
{
// 마커를 생성합니다
var
marker
=
new
kakao
.
maps
.
Marker
({
...
...
@@ -92,8 +98,8 @@ function displayMarker(locPosition, message) {
// 인포윈도우를 생성합니다
var
infowindow
=
new
kakao
.
maps
.
InfoWindow
({
content
:
iwContent
,
removable
:
iwRemoveable
content
:
iwContent
,
removable
:
iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
...
...
@@ -101,7 +107,8 @@ function displayMarker(locPosition, message) {
// 지도 중심좌표를 접속위치로 변경합니다
map
.
setCenter
(
locPosition
);
}
</script>
}
</script>
</body>
</html>
\ No newline at end of file
...
...
map_sql/study.js
View file @
520ad2a
var
mysql
=
require
(
'mysql'
);
module
.
exports
=
{
nearShow
:
function
(
lat
,
lon
)
{
var
near_show_list
=
[];
module
.
exports
=
{
nearShow
:
function
(
lat
,
lon
)
{
var
near_show_list
=
[];
var
connection
=
mysql
.
createConnection
({
"host"
:
"culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com"
,
"user"
:
"root"
,
"user"
:
"root"
,
"password"
:
"dldbwp1207"
,
"port"
:
"3306"
,
"database"
:
"showdata"
});
connection
.
connect
();
var
dataNum
=
0
;
connection
.
query
(
'SELECT COUNT (*) AS cnt FROM SHOW_DATA'
,
function
(
error
,
results
,
field
)
{
if
(
error
)
{
var
dataNum
=
0
;
connection
.
query
(
'SELECT COUNT (*) AS cnt FROM SHOW_DATA'
,
function
(
error
,
results
,
field
)
{
if
(
error
)
{
console
.
log
(
error
);
}
console
.
log
(
results
[
0
].
cnt
);
dataNum
=
results
[
0
].
cnt
;
dataNum
=
results
[
0
].
cnt
;
});
connection
.
query
(
'SELECT id,latitude,longitude FROM SHOW_DATA'
,
function
(
error
,
results
,
field
)
{
if
(
error
)
{
connection
.
query
(
'SELECT id,latitude,longitude FROM SHOW_DATA'
,
function
(
error
,
results
,
field
)
{
if
(
error
)
{
console
.
log
(
error
);
}
console
.
log
([
lat
,
lon
]);
for
(
var
i
=
0
;
i
<
dataNum
;
i
++
)
{
var
latgap
=
(
lat
-
results
[
i
].
latitude
)
*
110
;
var
longap
=
(
lon
-
results
[
i
].
longitude
)
*
91
;
var
cal
=
latgap
*
latgap
+
longap
*
longap
;
if
(
cal
<=
1600
)
{
console
.
log
([
lat
,
lon
]);
for
(
var
i
=
0
;
i
<
dataNum
;
i
++
)
{
var
latgap
=
(
lat
-
results
[
i
].
latitude
)
*
110
;
var
longap
=
(
lon
-
results
[
i
].
longitude
)
*
91
;
var
cal
=
latgap
*
latgap
+
longap
*
longap
;
if
(
cal
<=
1600
)
{
console
.
log
(
results
[
i
].
id
);
near_show_list
.
push
([
results
[
i
].
id
,
results
[
i
].
latitude
,
results
[
i
].
longitude
]);
near_show_list
.
push
([
results
[
i
].
id
,
results
[
i
].
latitude
,
results
[
i
].
longitude
]);
}
}
});
connection
.
end
();
return
near_show_list
;
//
return near_show_list;
}
}
...
...
Please
register
or
login
to post a comment