멀티마커
본문
게시판리스트 위에 게시글에 등록되어있는 주소로 지도위에 멀티마커를 구현하려고하는데요,
아래 소스는 좌표값이 있어야 표기해주는 소스인데,
해당 게시물에서는
<?
$ex3_filed = explode("|",$write[wr_7]);
$ext3_00 = $ex3_filed[0];
$ext3_01 = $ex3_filed[1];
$ext3_02 = $ex3_filed[2];
$ext3_03 = $ex3_filed[3];
$ext3_04 = $ex3_filed[4];
$ext3_05 = $ex3_filed[5];
$ext3_06 = $ex3_filed[6];
$ext3_07 = $ex3_filed[7];
$ext3_08 = $ex3_filed[8];
$ext3_09 = $ex3_filed[9];
?>
다음 도로명주소를 검색하여
우편번호앞자리 <?=$ext3_00?>, 우편번호뒷자리<?=$ext3_01?>, 기본주소 <?=$ext3_02?>, 상세주소 <?=$ext3_02?> 를 각각 저장되고있습니다.
게시물에 등록된 주소를 멀티마커로 구현하려면 어떻게해야하나요?
<div id="map" style="width:100%;height:600px;"></div>
<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_23]);
$ylng=($list[$i][wr_24]);
?>
<?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.387451, 126.961792);
var mapOptions = {
zoom: 6,
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);
}
function getClickHandler(seq) {
return function(e) {
var marker = markers[seq],
infoWindow = infoWindows[seq];
if (infoWindow.getMap()) {
infoWindow.close();
} else {
infoWindow.open(map, marker);
}
}
}
for (var i=0, ii=markers.length; i<ii; i++) {
naver.maps.Event.addListener(markers[i], 'click', getClickHandler(i));
}
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(7);
</script>
답변 1
다음 멀티마커(제가 쓰는거) 입니다 참고하세요~
키 바꾸시구요~
<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=6f9c24bfbd98aa756c2ebea7cb4de552"></script>
<script>
// 마커를 담을 배열입니다
var markers = [];
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.3097544, 126.83003118), // 지도의 중심좌표
level: 5 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption);
// 검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다
var infowindow = new daum.maps.InfoWindow({zIndex:999});
// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
var positions = [
<?
if(!$date2){
$date2 = date('Y-m-d');
}
$sql = "SELECT * FROM location_info where pnum = '$hp' and location_update = '$date2' order by idx asc ";
$result = sql_query($sql);
for($i=0;$row=sql_fetch_array($result);$i++){
?>
{
title: '<div id="a<?=$i;?>"><?=$row[time]."-".$row[minute];?></div>',
latitude: "<?=$row[lat];?>",
longitude: "<?=$row[lng];?>",
newAddress: "<?=$row[time].'시 '.$row[minute].'분';?><a href='http://donnena.why-be.co.kr/mobile/day_cording.php?hp=<?=$hp;?>&lat=<?=$row[lat];?>&lng=<?=$row[lng];?>&device=mobile' target='_balnk'>링크</a>"
},
<? } ?>
];
for (var i = 0; i < positions.length; i ++) {
var listEl = document.getElementById('positionsList'),
menuEl = document.getElementById('menu_wrap'),
fragment = document.createDocumentFragment(),
bounds = new daum.maps.LatLngBounds(),
listStr = '';
var placePosition = new daum.maps.LatLng(positions[i].latitude, positions[i].longitude),
marker = addMarker(placePosition, i),
itemEl = getListItem(i, positions[i], marker); // 검색 결과 항목 Element를 생성합니다
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
bounds.extend(placePosition);
// 마커와 검색결과 항목에 mouseover 했을때
// 해당 장소에 인포윈도우에 장소명을 표시합니다
// mouseout 했을 때는 인포윈도우를 닫습니다
(function(marker, title) {
daum.maps.event.addListener(marker, 'mouseover', function() {
displayInfowindow(marker, title);
});
daum.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
itemEl.onmouseover = function () {
displayInfowindow(marker, title);
};
itemEl.onmouseout = function () {
infowindow.close();
};
})(marker, positions[i].title);
fragment.appendChild(itemEl);
// 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다
listEl.appendChild(fragment);
menuEl.scrollTop = 0;
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
//map.setBounds(bounds);
}
// 검색결과 항목을 Element로 반환하는 함수입니다
function getListItem(index, positions) {
var el = document.createElement('li'),
itemStr = '<span class="markerbg marker_' + (index+1) + '"></span>' +
'<div class="info">' ;
itemStr += ' <span>' + positions.newAddress + '</span>';
el.innerHTML = itemStr;
el.className = 'item';
return el;
}
// 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
function addMarker(position, idx, title) {
var imageSrc = 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
imageSize = new daum.maps.Size(36, 37), // 마커 이미지의 크기
imgOptions = {
spriteSize : new daum.maps.Size(36, 691), // 스프라이트 이미지의 크기
spriteOrigin : new daum.maps.Point(0, 10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
offset: new daum.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
},
markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imgOptions),
marker = new daum.maps.Marker({
position: position, // 마커의 위치
image: markerImage
});
marker.setMap(map); // 지도 위에 마커를 표출합니다
markers.push(marker); // 배열에 생성된 마커를 추가합니다
return marker;
}
// 지도 위에 표시되고 있는 마커를 모두 제거합니다
function removeMarker() {
for ( var i = 0; i < markers.length; i++ ) {
markers[i].setMap(null);
}
markers = [];
}
// 검색결과 목록 또는 마커를 클릭했을 때 호출되는 함수입니다
// 인포윈도우에 장소명을 표시합니다
function displayInfowindow(marker, title) {
var content = '<div style="padding:5px;z-index:1;">' + title + '</div>';
infowindow.setContent(content);
infowindow.open(map, marker);
}
</script>
답변을 작성하시기 전에 로그인 해주세요.