다음지도에서 텍스트 스타일 수정
본문
다음지도에 여러 마커들을 표시하고 마커 바로 밑에 텍스트를 넣으려고 하는데요. 수정이 쉽지 않네요.
var content = '<?=$row[wr_subject]?>';
var overlay = new daum.maps.CustomOverlay({
content: content,
map: map,
position: marker.getPosition()
});
이렇게 넣으면 글 제목이 나오긴 나오는데 마커 밑 텍스트 부분만 스타일을 주고 싶은데 어떻게 해야 할까요? 답변 부탁드리겠습니다.
<!-- 다음지도 추가 -->
<div id="map" style="width:1100px;height:500px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b088221459aabd7030cab57e42b2e58d&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
mapOption = {
center: new daum.maps.LatLng(36.35660280252271, 127.30880113334855), // 지도의 중심좌표
level:12 // 지도의 확대 레벨
};
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);
<?
$sql = " select * from {$write_table} order by wr_id asc ";
$result = sql_query($sql);
$cnt = 0;
while ($row = sql_fetch_array($result))
{
if($row[wr_8] && $row[wr_9]) {
?>
// 마커를 생성합니다
var marker = new daum.maps.Marker({
map: map, // 마커를 표시할 지도
position: new daum.maps.LatLng(<?=$row[wr_8]?>, <?=$row[wr_9]?>), // 마커의 위치
});
var content = '<?=$row[wr_subject]?>';
var overlay = new daum.maps.CustomOverlay({
content: content,
map: map,
position: marker.getPosition()
});
$("#content").css({color:"#333", });
// 마커에 표시할 인포윈도우를 생성합니다
// 마커에 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() {
location.href = "./board.php?bo_table=map&wr_id="+<?=$row[wr_id]?>;
});
<?
$cnt++;
}
}
?>