멀티마커

멀티마커

QA

멀티마커

본문

게시판리스트 위에  게시글에 등록되어있는 주소로 지도위에 멀티마커를 구현하려고하는데요,

아래 소스는 좌표값이 있어야 표기해주는 소스인데,

 

해당 게시물에서는 

<?

$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>
답변을 작성하시기 전에 로그인 해주세요.
전체 0 | RSS
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT