-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathDetailMap.js
199 lines (175 loc) · 7.99 KB
/
DetailMap.js
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
var mapOptions = {
// (고양시)위도, 경도 설정
center: new naver.maps.LatLng(37.6583599, 126.8320201),
zoom: 13, // 1~21 설정 가능, 수치가 클수록 확대
// 확대, 축소 버튼
zoomControl: true,
zoomControlOptions: {
style: naver.maps.ZoomControlStyle.SMALL,
position: naver.maps.Position.TOP_RIGHT,
},
// 초록색 네이버 로고 표시 여부, 로고 제거
logoControl: false,
logoControlOptions: {
position: naver.maps.Position.TOP_LEFT,
},
// 지도 정보 문구, 네이버 문구 표시 여부, 네이버 문구 제거
mapDataControl: false,
mapDataControlOptions: {
position: naver.maps.Position.BOTTOM_LEFT,
},
};
// 지도 설정
var map = new naver.maps.Map(document.getElementById("map"), mapOptions);
// 마커 위치 정보 배열
var markerPositions = [
{ lat: 37.6583599, lon: 126.8320201 },
{ lat: 37.651506, lon: 126.874176 },
{ lat: 37.6582368641021, lon: 126.837878358259 },
{ lat: 37.6843594104788, lon: 126.752777764763 },
{ lat: 37.6145221200212, lon: 126.851655221389 },
{ lat: 37.61726673, lon: 126.8332155 },
{ lat: 37.6764, lon: 126.81438 },
{ lat: 37.68553, lon: 126.77011 },
{ lat: 37.60685, lon: 126.84335 },
{ lat: 37.6950255128289, lon: 126.724548044273 },
{ lat: 37.67222, lon: 126.77411 },
{ lat: 37.6694182016653, lon: 126.698210327392 },
{ lat: 37.6694182016653, lon: 126.698210327392 },
{ lat: 37.6926300161334, lon: 126.747222994 },
{ lat: 37.67962, lon: 126.75599 },
{ lat: 37.70496158, lon: 126.8983877 },
{ lat: 37.71135165, lon: 126.9035938 },
{ lat: 37.71135165, lon: 126.9035938 },
{ lat: 37.64380424, lon: 126.8064873 },
{ lat: 37.6642289486656, lon: 126.797587222168 },
{ lat: 37.68526038, lon: 126.7724664 },
// 추가 위치들을 계속해서 입력해주세요...
];
// 마커 배열
var markers = [];
var markerDetails = [
{ title: "쓰레기" ,date: "2021-7-21", time: "13시 00분", imageUrl: "images/trash1.png" },
{ title: "쓰레기", date: "2021-7-06", time: "06시 08분", imageUrl: "images/trash2.png" },
{ title: "쓰레기", date: "2021-7-11", time: "12시 59분", imageUrl: "images/trash3.png" },
{ title: "현수막", date: "2021-7-22", time: "15시 00분", imageUrl: "images/b1.png" },
{ title: "현수막", date: "2021-7-26", time: "05시 59분", imageUrl: "images/b2.png" },
{ title: "복합", date: "2021-8-01", time: "05시 59분", imageUrl: "images/tb1.png" },
// 추가적인 마커 데이터 ...
];
// 컨텐츠 HTML을 생성하는 함수
function createContentHtml(detail) {
var bgColor;
if(detail.title === "쓰레기"){
bgColor = "background-color: blue;";
}
if(detail.title === "현수막"){
bgColor = "background-color: red;";
}
if(detail.title === "복합"){
bgColor = "background-color: purple;";
}
return '<div class="marker-wrapper">' +
'<div class="marker-circle" style="width: 30px; height: 30px;' + bgColor +' border-radius: 50%;"></div>' +
'<div class="marker-detail" style="padding:5px; background-color:white; color:black; text-align:center; border:1px solid #a09b07; border-radius:14px; opacity:0.9; display:none;">' +
'<div style="font-weight: bold; font-size:14px;">'+ detail.title +'</div>' +
'<div style="font-weight: normal; font-size:13px; margin-top:3px;">' + detail.date + '<br/>' + detail.time + '</div>' +
'<div><img src="' + detail.imageUrl + '" alt="Trash Image" style="width: 100%; height: 100%; margin-top: 5px;"></div>' +
'</div>' +
'</div>';
}
// 마커 생성과 지도에 추가하는 함수
for (var i = 0; i < markerPositions.length; i++) {
var position = markerPositions[i];
var details = markerDetails[i]; // 해당 위치에 대한 상세 정보
var contents_html = createContentHtml(details); // 각 마커에 맞는 HTML 컨텐츠 생성
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(position.lat, position.lon),
map: map,
title: "쓰레기",
icon: {
content: contents_html,
size: new naver.maps.Size(38, 58),
anchor: new naver.maps.Point(19, 58),
},
});
// 클릭 이벤트 추가
naver.maps.Event.addListener(marker, 'click', function(e) {
var targetWrapper = $(e.overlay.getElement()).find('.marker-wrapper');
var detailElement = targetWrapper.find('.marker-detail');
var circleElement = targetWrapper.find('.marker-circle');
if (detailElement.is(':visible')) {
detailElement.hide(); // 상세 정보 숨김
circleElement.show(); // 원형 마커 표시
targetWrapper.css('z-index', ''); // z-index를 초기화
} else {
detailElement.show(); // 상세 정보 표시
circleElement.hide(); // 원형 마커 숨김
targetWrapper.parent().css('z-index', '999'); // 클릭된 마커의 부모 레이어의 z-index를 높여 상위 레이어에 표시
}
});
markers.push(marker);
}
function overCrime(childID) {
// $("#" + childID).show();
// console.log("hi");
var element = document.getElementById(childID);
if (element) {
element.style.display = "block";
console.log("hi");
} else {
console.log("Element with id " + childID + " not found");
}
}
function outCrime(childID) {
$("#" + childID).hide();
console.log("bye");
}
// 클러스팅 이미지 적용
$(document).ready(function () {
var htmlMarker1 = {
content:
'<div style="cursor:pointer;width:40px;line-height:42px;font-size:10px;color:white;text-align:center;font-weight:bold;background:url(https://navermaps.github.io/marker-tools.js/marker-clustering/images/cluster-marker-1.png);background-size:contain;"></div>',
size: N.Size(40, 40),
anchor: N.Point(20, 20),
},
htmlMarker2 = {
content:
'<div style="cursor:pointer;width:40px;line-height:42px;font-size:10px;color:white;text-align:center;font-weight:bold;background:url(https://navermaps.github.io/marker-tools.js/marker-clustering/images/cluster-marker-2.png);background-size:contain;"></div>',
size: N.Size(40, 40),
anchor: N.Point(20, 20),
},
htmlMarker3 = {
content:
'<div style="cursor:pointer;width:40px;line-height:42px;font-size:10px;color:white;text-align:center;font-weight:bold;background:url(https://navermaps.github.io/marker-tools.js/marker-clustering/images/cluster-marker-3.png);background-size:contain;"></div>',
size: N.Size(40, 40),
anchor: N.Point(20, 20),
},
htmlMarker4 = {
content:
'<div style="cursor:pointer;width:40px;line-height:42px;font-size:10px;color:white;text-align:center;font-weight:bold;background:url(https://navermaps.github.io/marker-tools.js/marker-clustering/images/cluster-marker-4.png);background-size:contain;"></div>',
size: N.Size(40, 40),
anchor: N.Point(20, 20),
},
htmlMarker5 = {
content:
'<div style="cursor:pointer;width:40px;line-height:42px;font-size:10px;color:white;text-align:center;font-weight:bold;background:url(https://navermaps.github.io/marker-tools.js/marker-clustering/images/cluster-marker-5.png);background-size:contain;"></div>',
size: N.Size(40, 40),
anchor: N.Point(20, 20),
};
// 기존 height:40px가 있는데 이거때문에 이미지가 넘치는 효과 발생 -> css 건드려야할듯
// content: '<div style="cursor:pointer;width:40px;height:40px;line-height:42px;font-size:10px;color:white;text-align:center;font-weight:bold;background:url('+ HOME_PATH +'/img/cluster-marker-5.png);background-size:contain;"></div>',
var markerClustering = new MarkerClustering({
minClusterSize: 2,
maxZoom: 17, // 클러스터 마커로 표현할 최대 줌 레벨입니다. 해당 줌 레벨보다 높으면, 클러스터를 구성하고 있는 마커를 노출합니다.
map: map,
markers: markers,
disableClickZoom: false,
gridSize: 120,
icons: [htmlMarker1, htmlMarker2, htmlMarker3, htmlMarker4, htmlMarker5],
indexGenerator: [10, 100, 200, 500, 1000],
stylingFunction: function (clusterMarker, count) {
$(clusterMarker.getElement()).find("div:first-child").text(count);
},
});
});