이전 목록 다음
미채택 완료

[JS]다음맵 관련 질문 입니다.

제제윤아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2016-05-02 (월) 14:47:57 6,382
Copy 
<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>

위와 같은 코드로 맵을 불러올 경우 마커를 클릭시 오버레이창을 통해

마커 정보를 나타나게 하려고 합니다.

하지만 현재는 마커를 클릭할 경우...

동일한 정보의 오버레이창이 나타나는 문제가 있습니다.

도대체 어디가 잘못되었는지 ;;;

알수가 없어서 이렇게 올려보게 되었습니다. ㅠㅠ

조언 부탁드립니다.  

다음맵 자바스크립트 그누보드5
|

답변 1개

먼먼지손
프로필 보기이 회원 글보기이 회원의 댓글보기
 2016-05-05 (목) 23:36:31

아마도 클릭할때 실행하는 playjoin.setMap() 여기가 문제될듯 싶은데요. 

playjoin 이게 매번 갱신될테니.. 

api키땜에 테스트는 못해봤습니다만 이런식으로 배열로 처리하는건 어떨까요?

참고로 위에 positions의 content에 닫기버튼의 클릭이벤트에 click="closeOverlay(0)" 이런식으로 각각 순번 적어줘야 합니다. 0부터 0,1,2 이렇게요.

Copy 
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);     }

답변을 작성하려면 로그인이 필요합니다.