김서연 / Corona_Vaccination_Medical_Institution

Go to a project
Toggle navigation Toggle navigation pinning
김서연
d086c5fa 2 parents 88e95f1c 0ce2840f

merge conflict 해결

Inline Side-by-side
Showing 2 changed files with 91 additions and 236 deletions
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>여러개 마커에 이벤트 등록하기1</title>
</head>
<body>
<h1>COVID-19 의료기관 검색하기</h1>
<form action="/" method="post">
<p>
<input type="text" name="region" placeholder="서울시"/>
<input type="submit"/>
</p>
</form>
<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(37.596672, 127.051950), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
var listData = "<%= result %>";
console.log(listData[1]);
//입력되는 배열명이 listData로 들어오면 됨.
listData.forEach(function(addr, index) {
var tmpaddr = addr[0].split(',');
console.log(tmpaddr);
geocoder.addressSearch(tmpaddr[0], function(result, status) {
if (status === daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
var marker = new daum.maps.Marker({
position: coords,
clickable: true});
// 마커를 지도에 표시합니다.
marker.setMap(map);
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div>',
removable : true
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
});
}
});
});
// 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>
<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
......@@ -3,7 +3,6 @@
<head>
<meta charset="utf-8">
<title>코로나 백신 의료기관 조회</title>
<!-- <link rel="stylesheet" href="/css/master.css"> -->
<%if(typeof(info)!="undefined"){%>
<script>
......@@ -40,7 +39,7 @@
<ol id="placelist">
<% for(i=0; i<info.length; i++){%>
<li class="item">
<div class="info">
<div class="info" onmouseover="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', true)" onmouseout="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', false)">
<span><strong><%= info[i].orgnm%></strong></span>
<%if(info[i].hldyYn=='N') {%>
<span style="color:red"> (당일 휴무) </span>
......@@ -66,75 +65,99 @@
<%} %>
<% if(typeof(result) != "undefined"){ %>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
level: 2 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
var listData = "<%= result %>";
listData = listData.replaceAll('&#34;','\"');
listData = JSON.parse(listData);
var count = 0;
//입력되는 배열명이 listData로 들어오면 됨.
listData.forEach(function(addr, index) {
var tmpaddr = ((addr.orgZipaddr).split(','))[0];
console.log(tmpaddr);
geocoder.addressSearch(tmpaddr, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
count += 1;
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
level: 2 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
var listData = "<%= result %>";
listData = listData.replaceAll('&#34;','\"');
listData = JSON.parse(listData);
var count = 0;
//입력되는 배열명이 listData로 들어오면 됨.
listData.forEach(function(addr, index) {
var tmpaddr = ((addr.orgZipaddr).split(','))[0];
console.log(tmpaddr);
geocoder.addressSearch(tmpaddr, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
count += 1;
var marker = new kakao.maps.Marker({
position: coords,
clickable: true});
// 마커를 지도에 표시합니다.
marker.setMap(map);
var num=1;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:250px;text-align:center;padding:5px 0;">' + addr.orgnm + '</div>',
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
if(count == 1){
map.setCenter(coords);
}
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
//console.log(listData.length);
}
});
});
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
var marker = new kakao.maps.Marker({
position: coords,
clickable: true
});
// 마커를 지도에 표시합니다.
marker.setMap(map);
var num=1;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:250px;text-align:center;padding:5px 0;">' + addr.orgnm + '</div>',
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
if(count == 1){
map.setCenter(coords);
}
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
//console.log(listData.length);
}
});
});
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
var infowindows = [];
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
var infowindows = [];
function displayinfowindow(address,name,flag){
if(flag){
var tmpaddr = (address.split(','))[0];
geocoder.addressSearch(tmpaddr, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
map.setCenter(coords);
var marker = new kakao.maps.Marker({
position: coords,
clickable: true
});
infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:250px;text-align:center;padding:5px 0;">' + name + '</div>',
});
infowindows.push(infowindow);
infowindow.open(map, marker);
}
});
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
else{
for(var i = 0; i<infowindows.length;i++)
infowindows[i].close();
infowindows = [];
}
</script>
<% } %>
}
</script>
<% } %>
</body>
</html>
\ No newline at end of file
......