어느 특정 시 에 대한 약국,병원의 위치를 마커로 표현하고, 마커를 누를시에 다중 오버레이를 이용하여
다양한 정보를 나타내고싶습니다.
병원에 대한 좌표는 list Data로 표현했습니다.
var listData = [
‘경기 안산시 상록구 예술광장로 69’,
‘경기 안산시 단원구 적금로 123’,
‘경기 안산시 단원구 고잔1길 7’,
‘경기 안산시 단원구 예술대학로 17’,
‘경기 안산시 단원구 고잔2길 59’,
‘경기 안산시 단원구 고잔1길 33’,
‘경기 안산시 상록구 월피로 88’,
‘경기 안산시 상록구 예술광장로 35’,
‘경기 안산시 상록구 예술광장로 35’,
‘경기 안산시 상록구 예술광장로 35’,
‘경기 안산시 상록구 예술광장1로 16’,
‘경기 안산시 상록구 예술광장로 25’,
];
그리고 병원에 대한 정보들은 아래에 있는 overlay로 표현했습니다
var overlay1 =[
{
content:
‘
’ +
’
’
’,’
’ +
’
’ ’ +
’
’ +’
’ +
’ 사랑의 병원’ +
’ ’ +
’
’ +’ 사랑의 병원’ +
’ ’ +
’
’ ’ +
’ +’
’
latlng: new kakao.maps.LatLng(37.327115,126.844744)
},
{
content:
‘
’ +
’
’
’,’
’ +
’
’ ’ +
’
’ +’
’ +
’ 고대 안산병원’ +
’ ’ +
’
’ +’ 고대 안산병원’ +
’ ’ +
’
’ ’ +
’
’
latlng: new kakao.maps.LatLng(37.318416,126.824873)
}
];
다중 오버레이를 표현해서 hospitalMaker로 이용하여 구현해봤습니다.
function hospitalMaker(){
var redImageSrc = “https://proxy.goorm.io//service/5f2e07df946545648f88f198_dx8it1L1BbWNywDXuzh.run.goorm.io/9080//file/load/hospital.png?path=d29ya3NwYWNlJTJGc3R1ZHlfYXBwJTJGaG9zcGl0YWwucG5n&docker_id=dx8it1L1BbWNywDXuzh&secure_session_id=I7zZY1aEUKH0QJuNTFBr0HeKomD9KxSE”;
// 마커이미지의 크기입니다
var redImageSize = new kakao.maps.Size(50, 50);
// 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
var redImageOption = {offset: new kakao.maps.Point(20, 50)};
// 마커 이미지를 생성합니다
var redMarkerImage = new kakao.maps.MarkerImage(redImageSrc, redImageSize, redImageOption);
var geocoder = new kakao.maps.services.Geocoder();
var flag1=1;
// 주소로 좌표를 검색합니다
listData.forEach(function(addr, index) {
// 주소로 좌표를 검색합니다
geocoder.addressSearch(addr, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
coords = new kakao.maps.LatLng(result[0].y, result[0].x);
var circle = new kakao.maps.Circle({
center : new kakao.maps.LatLng(result[0].y, result[0].x),
radius: radius,
strokeWeight: 1,
strokeColor: '#6600FF',
strokeOpacity: 1,
strokeStyle: 'solid', // 선의 스타일 입니다
fillColor: '#FFD9FA', // 채우기 색깔입니다
fillOpacity: 0.7 // 채우기 불투명도 입니다
});
// 결과값으로 받은 위치를 마커로 표시합니다
marker = new kakao.maps.Marker({
map: map,
position: coords,
image: redMarkerImage
});
//오버레이 표시
overlay= new kakao.maps.CustomOverlay({
content: overlay1[index].content,
map: map,
position: coords
});
//오버레이 지도에 표시
kakao.maps.event.addListener(marker, 'click', function (){overlay.setMap(map);})
kakao.maps.event.addListener(marker,'click', inCircle(circle));
//kakao.maps.event.addListener(marker, 'mouseover', closeOverlay());
kakao.maps.event.addListener(marker, 'mouseover', outCircle(circle));
}
markerH1.push(marker);
});
});
}
이렇게 오버레이를 해당 병원마커에 뜨는것 까지 되게했지만
다중 오버레이를 제어할수있는 법을 모르겠습니다
ex) 오버레이 창을 끌려할때 특정오버레이 한개만 꺼짐
어떻게 해야 모든 오버레이 창을 닫는걸 제어할수있는지 여쭤봅니다.