-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (113 loc) · 4.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>구래동 유흥업소 지도</title>
</head>
<body>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body {
font-family: "Nanum Gothic", sans-serif;
background: #232526; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #414345, #232526); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#map {
width: 100%;
height: 700px;
}
.info {
color: white;
margin-left: 10px;
margin-top: 5px;
}
.info h1 {
margin: 0;
margin-top: 10px;
margin-bottom: 5px;
}
.info p {
margin: 0;
}
.small {
font-size: small;
}
a {
color: beige;
font-style: italic;
text-decoration : none;
}
.source {
float: right;
margin-right: 10px;
}
</style>
<div id="map"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APP_KEY&libraries=services,drawing"></script>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="./map.js"></script>
<div class="info">
<h1><span class="fas fa-beer"></span> 구래동 유흥업소 지도</h1>
<p>Google Places API와 Daum Maps API를 사용해서 개발했습니다<span class="small">(다른 지역의 업소가 일부 표시될 수 있습니다).</span></p>
<p>
지도의 마커를 클릭하면 상호를 확인하실 수 있고, 스크롤이나 줌으로 지도 확대가 가능합니다.
<b class="source"><i class="fab fa-github"></i><a class="button" href="https://github.com/JunhoYeo/Guraedong-Debauchery-Map">소스코드</a></b>
</p>
</div>
</div>
<script>
function drawCircle(center){
var circle = new daum.maps.Circle({
map: map,
center: center, // 원의 중심좌표 입니다
radius: 5, // 미터 단위의 원의 반지름입니다
strokeWeight: 5, // 선의 두께입니다
strokeColor: '#FF0000', // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'soild', // 선의 스타일 입니다
fillColor: '#FFFFFF', // 채우기 색깔입니다
fillOpacity: 1 // 채우기 불투명도 입니다
});
}
var linePath = [
new daum.maps.LatLng(37.640168, 126.640539),
new daum.maps.LatLng(37.639582, 126.637663),
new daum.maps.LatLng(37.638741, 126.635368),
new daum.maps.LatLng(37.637917, 126.631741),
new daum.maps.LatLng(37.638019, 126.631323),
new daum.maps.LatLng(37.643781, 126.629360),
new daum.maps.LatLng(37.643458, 126.627804),
new daum.maps.LatLng(37.645667, 126.627120),
new daum.maps.LatLng(37.645771, 126.626932),
new daum.maps.LatLng(37.645575, 126.625925)
];
drawCircle(linePath[0]);
drawCircle(linePath[linePath.length - 1]);
var markerImage = new daum.maps.MarkerImage(
'./marker-red.png',
new daum.maps.Size(35, 35),
new daum.maps.Point(18, 34)
);
var dest = new daum.maps.Marker({
map: map,
position: linePath[linePath.length - 1],
fillOpacity: 0.8
});
dest.setImage(markerImage);
daum.maps.event.addListener(dest, 'click', function() {
infowindow.setContent('<div style="padding:5px;font-size:12px;">학원(G1230 구래점)</div>');
infowindow.open(map, dest);
});
var polyline = new daum.maps.Polyline({
path: linePath, // 선을 구성하는 좌표배열 입니다
strokeWeight: 5, // 선의 두께 입니다
strokeColor: '#FF0000', // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid' // 선의 스타일입니다
});
polyline.setMap(map);
</script>
</body>
</html>