Copy
<div id="map" style="width:100%;height:350px;"></div> <style> .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://t1.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://t1.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(33.450701, 126.570667), // 지도의 중심좌표 level: 3 // 지도의 확대 레벨 };var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 // 마커를 표시할 위치와 title 객체 배열입니다 var positions = [ { content: '<div class="wrap">' + ' <div class="info">' + ' <div class="title">' + ' 카카오 스페이스닷원' + ' <div class="close" onclick="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">제주특별자치도 제주시 첨단로 242</div>' + ' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' + ' <div><a href="http://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' + ' </div>' + ' </div>' + ' </div>' + '</div>', latlng: new daum.maps.LatLng(33.450705, 126.570677) }, { content: '<div class="wrap">' + ' <div class="info">' + ' <div class="title">' + ' 카카오 스페이스닷원' + ' <div class="close" onclick="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">제주특별자치도 제주시 첨단로 242</div>' + ' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' + ' <div><a href="http://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' + ' </div>' + ' </div>' + ' </div>' + '</div>', latlng: new daum.maps.LatLng(33.450936, 126.569477) }, { content: '<div class="wrap">' + ' <div class="info">' + ' <div class="title">' + ' 카카오 스페이스닷원' + ' <div class="close" onclick="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">제주특별자치도 제주시 첨단로 242</div>' + ' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' + ' <div><a href="http://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' + ' </div>' + ' </div>' + ' </div>' + '</div>', latlng: new daum.maps.LatLng(33.450879, 126.569940) }, { content: '<div class="wrap">' + ' <div class="info">' + ' <div class="title">' + ' 카카오 스페이스닷원' + ' <div class="close" onclick="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">제주특별자치도 제주시 첨단로 242</div>' + ' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' + ' <div><a href="http://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' + ' </div>' + ' </div>' + ' </div>' + '</div>', latlng: new daum.maps.LatLng(33.451393, 126.570738) }];for (var i = 0; i < positions.length; i ++) { // 마커를 생성합니다 var marker = new daum.maps.Marker({ map: map, // 마커를 표시할 지도 position: positions[i].latlng, // 마커를 표시할 위치 });//오버레이 시작var overlay = new daum.maps.CustomOverlay({content: positions[i].content,position: positions[i].latlng,map: map, // 마커를 표시할 지도});// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다daum.maps.event.addListener(marker, 'click', function() { overlay.setMap(map);});// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 function closeOverlay() { overlay.setMap(null); }}</script>
다 정상 작동하는대요
오버레이 닫기나 클릭이 하나만 작동합니다.
오버레이 말고 윈포윈도우로 하면 정상 작동하고요
오버레이 사용할때 무엇이 잘못된건지 아무리 해봐도 도무지 알수가 없네요 어느부분이 문제일까요?
|
답변 2개 / 댓글 2개
채택된 답변
+20 포인트
naulab
8년 전
var overlay 를 for문밖에 선언해보시고 사용해보시는게..
답변에 대한 댓글 2개
storebox
8년 전
naulab
8년 전
마커와 오버레이 모두 배열화가 필요해보입니다
[code]
var maker = [];
var overlay = [];
for (var i = 0; i < positions.length; i ++) {
// 마커를 생성합니다
marker[i] = new daum.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
});
overlay[i] = '소스';
}
[/code]
이렇게되면 클로즈나 클릭이벤트시에도 인덱스르 잡고 실행하는 부분도 바꿔줘야겠죠?
[code]
var maker = [];
var overlay = [];
for (var i = 0; i < positions.length; i ++) {
// 마커를 생성합니다
marker[i] = new daum.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
});
overlay[i] = '소스';
}
[/code]
이렇게되면 클로즈나 클릭이벤트시에도 인덱스르 잡고 실행하는 부분도 바꿔줘야겠죠?
ceo767...
답변을 작성하려면 로그인이 필요합니다.
무엇이 문제 일까요