게시판리스트 위에 게시글에 등록되어있는 주소로 지도위에 멀티마커를 구현하려고하는데요,
아래 소스는 좌표값이 있어야 표기해주는 소스인데,
해당 게시물에서는
<?
$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?> 를 각각 저장되고있습니다.
게시물에 등록된 주소를 멀티마커로 구현하려면 어떻게해야하나요?
Copy
<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개
2017-06-16 (금) 18:15:14
다음 멀티마커(제가 쓰는거) 입니다 참고하세요~
키 바꾸시구요~
Copy
<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>
답변을 작성하려면 로그인이 필요합니다.