지도/로컬 API에 대한 문의게시판입니다.
제가 참고한 예제는 다음과 같습니다.
(http://apis.map.daum.net/web/sample/removableCustomOverlay/)
저는 여러개의 마커를 만든 후 여러개 마커 모두 '닫기가 가능한 커스텀 오버레이’로 만들고 싶습니다.
충분히 많이 고민을 해보았고, 많은 시도를 해보았습니다.
제 지식선에서 할 수 있는 시도는 다 해본 것같아 마지막 지푸라기 심정으로 글을 남겨봅니다.
현재에러
"어떤 마크를 클릭해도 특정 마크만 오버레이 됩니다."
map: map 코드를 할 경우에는 모든 마크가 정상적으로 뜹니다.
그러나, 기본값을 닫기로 하고 싶어서 null로 변경할 경우,
특정 오버레이만 됩니다.
해당 예제 웹사이트는 다음과 같습니다.
(http://220.67.127.177/0521_kakao.php)
저의 코드가 실행되는 페이지입니다.
어떻게 코드를 수정해야 하는지 도저히 모르겠습니다.
코드는 다음과 같습니다.
var positions_1 = [];
var positions_2 = [];
<?php
$con = mysqli_connect($db_host,$db_user,$db_passwd,$db_name);
mysqli_set_charset($con, "utf8");
$result = mysqli_query($con, "select * from StoreTable");
$n = 1;
while($row = mysqli_fetch_array($result)){
$lat = $row['lat'];
$lon = $row['lon'];
$name = $row['name'];
$add = $row['add'];
?>
positions_2.push({ latlng: new daum.maps.LatLng(<?= $lat; ?>, <?= $lon; ?>)});
<?
$n++;
}
?>
// 마커 이미지의 이미지 주소입니다
var imageSrc = "http://hufs4tmi.dothome.co.kr//image/NEW_markerS.png";
for (var i = 0; i < positions_2.length; i ++) {
<?
$con = mysqli_connect($db_host,$db_user,$db_passwd,$db_name);
mysqli_set_charset($con, "utf8");
$result = mysqli_query($con, "select * from StoreTable");
$m = 1;
while($row = mysqli_fetch_array($result)){
?>
positions_1.push({ content:
'<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' <?= $name; ?>' +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="http://hufs4tmi.dothome.co.kr//image/yongin.png" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="jibun ellipsis"><?= $add; ?></div>' +
' <div><a href="http://220.67.127.177/TMI/Yongin_market_sub.php" target="_blank" class="link">상세페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>'
});
<?
$m++;
}
?>
// 마커 이미지의 이미지 크기 입니다
var imageSize = new daum.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new daum.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions_2[i].latlng, // 마커의 위치
image : markerImage // 마커 이미지
});
var overlay = new daum.maps.CustomOverlay({
content: positions_1[i].content,
map: map,
position: marker.getPosition()
});
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
daum.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
overlay.setMap(null);
}
}