여러개 마커 다음지도에 출력시에 대한 문제인데요. 코딩좀 봐주세요
본문
아무리봐도 답이 없네요;; 코딩에도 이상이 없어보이는데...도데체 뭐가 문제인지...
아래 코드는 다음지도를 호출해서, DB에 있는 위도 경도 데이터를 추출해서,
뿌려주도록 하는 코딩을 제가 만들어 보았는데요.
일단 10개만 뿌려주도록 해보았는데, 그냥 지도자체도 출력이 안되고 먹통이 되버리네요
그래서 DB호출하는 쿼리문에 문제가 있는건가 확인햇는데,
지도 호출 부분을 모두 삭제하고 DB호출만 해보았을때 아주 정상적으로 출력이 잘되는 것도 확인했습니다.
지도에 표시할 내용이 약 10만개 정도 되는데, 일단 그걸 다 표현하지는 못하더라도,
단 10개라도 먼저 해볼려고 한건데...참 뭐가 문제인지 도저히 알수가 없네요 ㅠㅠ
도와주세요!!!
<?
include_once('./include.php');
?>
<div id="map" style="width:100%;height:350px;"></div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은키값&libraries=clusterer"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
mapOption = {
center: new daum.maps.LatLng(37.56722, 126.97833), // 지도의 중심좌표
level: 10 // 지도의 확대 레벨
};
var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new daum.maps.MapTypeControl();
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
<?
$qry1 = " select * from 테이블명 where 필드명 <> '1' order by no desc ";
$result1 = mysql_query($qry1,$dbcon);
$cnt = 0;
for($i=0; $row=mysql_fetch_array($result1); $i++)
{
?>
// 마커를 생성합니다
var marker = new daum.maps.Marker({
position: new daum.maps.LatLng(<?= $row['lat']; ?>, <?= $row['lng']; ?>) // 마커의 위치
map: map, // 마커를 표시할 지도
});
// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new daum.maps.InfoWindow({
content: '<?= $row['name1']; ?>' // 인포윈도우에 표시할 내용
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
daum.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
daum.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
//daum.maps.event.addListener(marker, 'click', br_redirect(positions[i].wr_id));
// 마커에 click 이벤트를 등록합니다
daum.maps.event.addListener(marker, 'click', function() {
});
<?
$cnt++;
if($cnt == 10) break;
}
?>
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
</script>
답변 2
DB를 제대로 불러온다고 가정했을때,
var marker = new daum.maps.Marker({
position: new daum.maps.LatLng(<?= $row['lat']; ?>, <?= $row['lng']; ?>) // 마커의 위치
map: map, // 마커를 표시할 지도
});
이내용은
var marker<?=$i?> = new daum.maps.Marker({
position<?=$i?>: new daum.maps.LatLng(<?= $row['lat']; ?>, <?= $row['lng']; ?>) // 마커의 위치
map: map, // 마커를 표시할 지도
});
마찬가지, position, infoWindow, Content 부분도 고유값을 가지도록 해야 합니다.
// 마커를 생성합니다
var marker = new daum.maps.Marker({
map: map, // 마커를 표시할 지도
position: new daum.maps.LatLng(<?= $row['lat']; ?>, <?= $row['lng']; ?>) // 마커의 위치
});
이렇게 수정하니...되네요...
마커를 표시할 지도 코드 위치를 바꾸니 정상적으로 10개는 출력이 되네요.
그이상으로 출력시키니까 출력이 안되네요.
아무튼 답변 감사드립니다.
재가 질문을 잘못 이해 했을수 있습니다.
위의 소스 분석과 저의 경험을 보자면 답은 이렇습니다.
for 문으로 해서 뿌려주긴 하는데요 HTML 상은 다보여지게 됩니다.
span none 처리할경우라도요
그렇다면 <div id="map" style="width:100%;height:350px;"></div> 가
그것을 실행할 것인데 ID 값이 같다면???
만약 아이디값을 임의적으로 변경 처리해줄경우라면??
다음측에서는 그것을 수행할것인가도 생각해 보아야 할거 같습니다.
카톡: websil
답변감사합니다! 그레이님 답변보고 스스로 해결했습니다.
