[JS]다음맵 관련 질문 입니다.
본문
<div id="map" style="width:100%;height:350px;"></div>
<style>
/*
CSS */.wrap {position: absolute;left: 0;bottom: 40px;width:
288px;height: 132px;margin-left: -144px;text-align: left;overflow:
hidden;font-size: 12px;font-family: 'Malgun Gothic', dotum, '돋움',
sans-serif;line-height: 1.5;}
.wrap * {padding: 0;margin: 0;}
.wrap
.info {width: 286px;height: 120px;border-radius: 5px;border-bottom: 2px
solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background:
#fff;}
.wrap .info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;}
.info
.title {padding: 5px 0 0 10px;height: 30px;background:
#eee;border-bottom: 1px solid #ddd;font-size: 18px;font-weight: bold;}
.info
.close {position: absolute;top: 10px;right: 10px;color: #888;width:
17px;height: 17px;background:
url('http://i1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');}
.info .close:hover {cursor: pointer;}
.info .body {position: relative;overflow: hidden;}
.info .desc {position: relative;margin: 13px 0 0 90px;height: 75px;}
.desc .ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.desc .jibun {font-size: 11px;color: #888;margin-top: -2px;}
.info .img {position: absolute;top: 6px;left: 5px;width: 73px;height: 71px;border: 1px solid #ddd;color: #888;overflow: hidden;}
.info:after
{content: '';position: absolute;margin-left: -12px;left: 50%;bottom:
0;width: 22px;height: 12px;background:
url('http://i1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
.info .link {color: #5085BB;}
</style>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.504425294423825, 126.96068772828141), // 지도의 중심좌표
level: 5 // 지도의 확대 레벨
};
var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
/*=======================================================
==이 것 은 다 음 A P I 를 통 해 지 도 를 생 성 합 니 다==
========================================================*/
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
var locPosition = new daum.maps.LatLng(lat, lon) // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
// 마커와 인포윈도우를 표시합니다
geoloca(locPosition);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new daum.maps.LatLng(33.450701, 126.570667)
geoloca(locPosition);
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function geoloca(locPosition) {
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
/*===================================================
==이 것 은 H T M L 5 위 치 기 반 찾 는 거 입 니 다.==
=====================================================*/
var positions = [
{
title: '고수부지',
latlng: new daum.maps.LatLng(37.51004869993811, 126.96425889011286),
content: '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 고수부지 화장실' +
' <div class="close" xxxxxxxxxxonclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img
src="http://cfile181.uf.daum.net/image/250649365602043421936D"
width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">동작구 현충로10길 42</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 흑석동 1111</div>' +
' <div><a href="#" target="_blank" class="link">찾기</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>'
},
{
title: '중앙대 병원',
latlng: new daum.maps.LatLng(37.502735953860046, 126.9783086192915),
content: '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 중앙대 병원 화장실' +
' <div class="close" xxxxxxxxxxonclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img
src="http://cfile181.uf.daum.net/image/250649365602043421936D"
width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">동작구 현충로10길 42</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 흑석동 1111</div>' +
' <div><a href="#" target="_blank" class="link">찾기</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>'
},
{
title: '공원',
latlng: new daum.maps.LatLng(37.50957760010893, 126.95656803851037),
content: '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 공원 화장실' +
' <div class="close" xxxxxxxxxxonclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img
src="http://cfile181.uf.daum.net/image/250649365602043421936D"
width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">동작구 현충로10길 42</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 흑석동 1111</div>' +
' <div><a href="#" target="_blank" class="link">찾기</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>'
}
];
// 마커 이미지의 이미지 주소입니다
var imageSrc = "http://i1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
// 마커 이미지의 이미지 크기 입니다
var imageSize = new daum.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize);
for (var i = 0; i < positions.length; i ++) {
// 마커를 생성합니다
var pjmarker = new daum.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
zIndex: 3,
image : markerImage // 마커 이미지
});
//커스텀 오버레이
var playjoin = new daum.maps.CustomOverlay({
map: map,
clickable: true,
position: positions[i].latlng,
content: positions[i].content,
xAnchor: 0.5,
yAnchor: 1,
zIndex: 2
});
playjoin.setMap(null);
daum.maps.event.addListener(pjmarker, 'click', function() {
playjoin.setMap(map);
});
}
function closeOverlay() {
playjoin.setMap(null);
}
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
</script>
위와 같은 코드로 맵을 불러올 경우 마커를 클릭시 오버레이창을 통해
마커 정보를 나타나게 하려고 합니다.
하지만 현재는 마커를 클릭할 경우...
동일한 정보의 오버레이창이 나타나는 문제가 있습니다.
도대체 어디가 잘못되었는지 ;;;
알수가 없어서 이렇게 올려보게 되었습니다. ㅠㅠ
조언 부탁드립니다.
답변 1
아마도 클릭할때 실행하는 playjoin.setMap() 여기가 문제될듯 싶은데요.
playjoin 이게 매번 갱신될테니..
api키땜에 테스트는 못해봤습니다만 이런식으로 배열로 처리하는건 어떨까요?
참고로 위에 positions의 content에 닫기버튼의 클릭이벤트에 click="closeOverlay(0)" 이런식으로 각각 순번 적어줘야 합니다. 0부터 0,1,2 이렇게요.
var pjmarker = new Array();
var playjoin = new Array();
for (var i = 0; i < positions.length; i ++) {
// 마커를 생성합니다
pjmarker[i] = new daum.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
zIndex: 3,
image : markerImage // 마커 이미지
});
//커스텀 오버레이
playjoin[i] = new daum.maps.CustomOverlay({
map: map,
clickable: true,
position: positions[i].latlng,
content: positions[i].content,
xAnchor: 0.5,
yAnchor: 1,
zIndex: 2
});
playjoin[i].setMap(null);
daum.maps.event.addListener(pjmarker[i], 'click', function() {
playjoin[i].setMap(map);
});
}
function closeOverlay(i) {
playjoin[i].setMap(null);
}
답변을 작성하시기 전에 로그인 해주세요.