네이버 지도맵으로 제작시문제... ㅠㅠ
본문
게시판은 위 스킨을 이용하고 있습니다.
제작사이트
잘안되는 부분이 처음접속시 지도에 등록한 지점에 마커아이콘만 나오고 아이콘클릭시 정보가 보여지게 되는데요
전 이걸 처음접속시 아이콘클릭없이 등록한 정보가 같이 보여지게하고싶습니다
소스코드를 많이 여기저기 수정하면서 했지만 잘안되어 도움을 요청드립니다 ㅠ.ㅠ
첨부파일 기능이 없어 소스를 올릴수가없네요.. ㅠㅠ
답변 4
click 조건을 onload로 바꿔보시는것도 안됬나요...?
| for (var i=0, ii=markers.length; i<ii; i++) { |
| naver.maps.Event.addListener(markers[i], 'click', getClickHandler(i)); |
|
} 위 코드를
|
네 아무반응이 없습니다.
<script>
var MARKER_ICON_URL = '<?php echo $board_skin_url ?>/img/mapicon001.png';
var MARKER_HIGHLIGHT_ICON_URL = '<?php echo $board_skin_url ?>/img/mapicon002.png';
var MARKER_SPRITE_POSITION = {
<?php for ($i=0; $i<count($list); $i++) {
$yti=($list[$i][subject]);
$ylink="<a href='{$list[$i]['href']}'>{$yti}</a>";
$ylat=($list[$i][wr_3]);
$ylng=($list[$i][wr_4]);
?>
<?php if ($list[$i]['subject']){ ?>
"<?php echo $yti?>": [<?php echo $ylat?>, <?php echo $ylng?>,"<?php echo $ylink?>"]
<?php }?>
<?php if ($i==count($list)-1) continue; ?>
<?php if ($list[$i]['subject']){ ?>
,
<?php } ?>
<?php } ?>
};
var position = new naver.maps.LatLng(37.380177, 126.802934);
var mapOptions = {
//zoom: 7,
center: position,
mapTypeControl: true,
mapTypeControlOptions: {
style: naver.maps.MapTypeControlStyle.BUTTON,
position: naver.maps.Position.TOP_LEFT
},
zoomControl: true,
zoomControlOptions: {
style: naver.maps.ZoomControlStyle.SMALL,
position: naver.maps.Position.BOTTOM_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: naver.maps.Position.RIGHT_CENTER
},
logoControl: true,
logoControlOptions: {
position: naver.maps.Position.TOP_LEFT
},
mapDataControl: true,
mapDataControlOptions: {
position: naver.maps.Position.BOTTOM_LEFT
}
};
var map = new naver.maps.Map(document.getElementById('map'),mapOptions);
var bounds = map.getBounds(),
southWest = bounds.getSW(),
northEast = bounds.getNE(),
lngSpan = northEast.lng() - southWest.lng(),
latSpan = northEast.lat() - southWest.lat();
var markers = [], infoWindows = [];
var recognizer = new MarkerOverlappingRecognizer({
highlightRect: false,
tolerance: 15
});
recognizer.setMap(map);
function highlightMarker(marker) {
var icon = marker.getIcon();
if (icon.url !== MARKER_HIGHLIGHT_ICON_URL) {
icon.url = MARKER_HIGHLIGHT_ICON_URL;
marker.setIcon(icon);
}
marker.setZIndex(1000);
}
function unhighlightMarker(marker) {
var icon = marker.getIcon();
if (icon.url === MARKER_HIGHLIGHT_ICON_URL) {
icon.url = MARKER_ICON_URL;
marker.setIcon(icon);
}
marker.setZIndex(100);
}
for (var key in MARKER_SPRITE_POSITION) {
var position = new naver.maps.LatLng(MARKER_SPRITE_POSITION[key][0], MARKER_SPRITE_POSITION[key][1]);
var marker = new naver.maps.Marker({
map: map,
position: position,
title: key,
icon: {
url: MARKER_ICON_URL,
size: new naver.maps.Size(50, 50),
anchor: new naver.maps.Point(25, 25),
origin: new naver.maps.Point(0, 0)
},
zIndex: 100
});
var infoWindow = new naver.maps.InfoWindow({
content: '<div style="width:100px;text-align:center;padding:5px;">'+ MARKER_SPRITE_POSITION[key][2] +'</div>'
});
markers.push(marker);
infoWindows.push(infoWindow);
marker.addListener('mouseover', function(e) {
highlightMarker(e.overlay);
});
marker.addListener('mouseout', function(e) {
unhighlightMarker(e.overlay);
});
recognizer.add(marker);
window.MARKER = marker;
};
naver.maps.Event.addListener(map, 'zoom_changed', function() {
updateMarkers(map, markers);
});
naver.maps.Event.addListener(map, 'dragend', function() {
updateMarkers(map, markers);
});
function updateMarkers(map, markers) {
var mapBounds = map.getBounds();
var marker, position;
for (var i = 0; i < markers.length; i++) {
marker = markers[i]
position = marker.getPosition();
if (mapBounds.hasLatLng(position)) {
showMarker(map, marker);
} else {
hideMarker(map, marker);
}
}
}
function showMarker(map, marker) {
if (marker.setMap()) return;
marker.setMap(map);
}
function hideMarker(map, marker) {
if (!marker.setMap()) return;
marker.setMap(null);
}
for (var i=0, ii=markers.length; i<ii; i++) {
naver.maps.Event.addListener(markers[i], 'click', getClickHandler(i));
}
function getClickHandler(seq) {
return function(e) {
var marker = markers[seq],
infoWindow = infoWindows[seq];
if (infoWindow.getMap()) {
infoWindow.close();
} else {
infoWindow.open(map, marker);
}
}
}
var overlapCoverMarker = null;
naver.maps.Event.addListener(recognizer, 'overlap', function(list) {
if (overlapCoverMarker) {
unhighlightMarker(overlapCoverMarker);
}
overlapCoverMarker = list[0].marker;
naver.maps.Event.once(overlapCoverMarker, 'mouseout', function() {
highlightMarker(overlapCoverMarker);
});
});
naver.maps.Event.addListener(recognizer, 'clickItem', function(e) {
recognizer.hide();
if (overlapCoverMarker) {
unhighlightMarker(overlapCoverMarker);
overlapCoverMarker = null;
}
});
map.setZoom(13);
</script>
