멀티마커 채택완료
클립
8년 전
조회 4,092
게시판리스트 위에 게시글에 등록되어있는 주소로 지도위에 멀티마커를 구현하려고하는데요,
아래 소스는 좌표값이 있어야 표기해주는 소스인데,
해당 게시물에서는
$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];
?>
다음 도로명주소를 검색하여
우편번호앞자리 , 우편번호뒷자리, 기본주소 , 상세주소 를 각각 저장되고있습니다.
게시물에 등록된 주소를 멀티마커로 구현하려면 어떻게해야하나요?
</p><p><div id="map" style="width:100%;height:600px;"></div></p><p> </p><p> </p><p> </p><p><script></p><p> var MARKER_ICON_URL = '<?php echo $board_skin_url ?>/img/mapicon001.png';</p><p> var MARKER_HIGHLIGHT_ICON_URL = '<?php echo $board_skin_url ?>/img/mapicon002.png';</p><p> </p><p> var MARKER_SPRITE_POSITION = {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><?php for ($i=0; $i<count($list); $i++) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$yti=($list[$i][subject]);<span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$ylink="<a href='{$list[$i]['href']}'>{$yti}</a>";</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$ylat=($list[$i][wr_23]);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$ylng=($list[$i][wr_24]);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>?></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><?php if ($list[$i]['subject']){ ?></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>"<?php echo $yti?>": [<?php echo $ylat?>, <?php echo $ylng?>,"<?php echo $ylink?>"]</p><p><span class="Apple-tab-span" style="white-space:pre"> </span><?php }?></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><?php if ($i==count($list)-1) continue; ?></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><?php if ($list[$i]['subject']){ ?></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span><?php } ?></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><?php } ?></p><p> </p><p> };</p><p> </p><p> var position = new naver.maps.LatLng(37.387451, 126.961792);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var mapOptions = {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>zoom: 6,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>center: position,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>mapTypeControl: true,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>mapTypeControlOptions: {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>style: naver.maps.MapTypeControlStyle.BUTTON,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>position: naver.maps.Position.TOP_LEFT</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>},</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>zoomControl: true,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>zoomControlOptions: {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>style: naver.maps.ZoomControlStyle.SMALL,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>position: naver.maps.Position.BOTTOM_RIGHT</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>},</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>scaleControl: true,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>scaleControlOptions: {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>position: naver.maps.Position.RIGHT_CENTER</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>},</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>logoControl: true,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>logoControlOptions: {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>position: naver.maps.Position.TOP_LEFT</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>},</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>mapDataControl: true,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>mapDataControlOptions: {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>position: naver.maps.Position.BOTTOM_LEFT</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>};</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var map = new naver.maps.Map(document.getElementById('map'),mapOptions);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var bounds = map.getBounds(),</p><p> southWest = bounds.getSW(),</p><p> northEast = bounds.getNE(),</p><p> lngSpan = northEast.lng() - southWest.lng(),</p><p> latSpan = northEast.lat() - southWest.lat();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var markers = [], infoWindows = [];</p><p> </p><p> var recognizer = new MarkerOverlappingRecognizer({</p><p> highlightRect: false,</p><p> tolerance: 15</p><p> });</p><p> recognizer.setMap(map);</p><p> </p><p> function highlightMarker(marker) {</p><p> var icon = marker.getIcon();</p><p> </p><p> if (icon.url !== MARKER_HIGHLIGHT_ICON_URL) {</p><p> icon.url = MARKER_HIGHLIGHT_ICON_URL;</p><p> marker.setIcon(icon);</p><p> }</p><p> </p><p> marker.setZIndex(1000);</p><p> }</p><p> </p><p> function unhighlightMarker(marker) {</p><p> var icon = marker.getIcon();</p><p> </p><p> if (icon.url === MARKER_HIGHLIGHT_ICON_URL) {</p><p> icon.url = MARKER_ICON_URL;</p><p> marker.setIcon(icon);</p><p> }</p><p> </p><p> marker.setZIndex(100);</p><p> }</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p> </p><p> for (var key in MARKER_SPRITE_POSITION) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var position = new naver.maps.LatLng(MARKER_SPRITE_POSITION[key][0], MARKER_SPRITE_POSITION[key][1]);</p><p> </p><p> var marker = new naver.maps.Marker({</p><p> map: map,</p><p> position: position,</p><p> title: key,</p><p> icon: {</p><p> url: MARKER_ICON_URL,</p><p> size: new naver.maps.Size(50, 50),</p><p> anchor: new naver.maps.Point(25, 25),</p><p> origin: new naver.maps.Point(0, 0)</p><p> },</p><p> </p><p> zIndex: 100</p><p> });</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var infoWindow = new naver.maps.InfoWindow({</p><p> content: '<div style="width:100px;text-align:center;padding:5px;">'+ MARKER_SPRITE_POSITION[key][2] +'</div>'</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>markers.push(marker);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>infoWindows.push(infoWindow);</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>marker.addListener('mouseover', function(e) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>highlightMarker(e.overlay);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>marker.addListener('mouseout', function(e) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>unhighlightMarker(e.overlay);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>recognizer.add(marker);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>window.MARKER = marker;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>};</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>naver.maps.Event.addListener(map, 'zoom_changed', function() {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>updateMarkers(map, markers);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>naver.maps.Event.addListener(map, 'dragend', function() {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>updateMarkers(map, markers);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>function updateMarkers(map, markers) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var mapBounds = map.getBounds();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var marker, position;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>for (var i = 0; i < markers.length; i++) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>marker = markers[i]</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>position = marker.getPosition();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if (mapBounds.hasLatLng(position)) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>showMarker(map, marker);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>} else {</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>hideMarker(map, marker);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>function showMarker(map, marker) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if (marker.setMap()) return;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>marker.setMap(map);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>function hideMarker(map, marker) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if (!marker.setMap()) return;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>marker.setMap(null);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>function getClickHandler(seq) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>return function(e) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var marker = markers[seq],</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>infoWindow = infoWindows[seq];</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if (infoWindow.getMap()) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>infoWindow.close();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>} else {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>infoWindow.open(map, marker);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>for (var i=0, ii=markers.length; i<ii; i++) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>naver.maps.Event.addListener(markers[i], 'click', getClickHandler(i));</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p> </p><p> </p><p> var overlapCoverMarker = null;</p><p> </p><p> naver.maps.Event.addListener(recognizer, 'overlap', function(list) {</p><p> if (overlapCoverMarker) {</p><p> unhighlightMarker(overlapCoverMarker);</p><p> }</p><p> </p><p> overlapCoverMarker = list[0].marker;</p><p> </p><p> naver.maps.Event.once(overlapCoverMarker, 'mouseout', function() {</p><p> highlightMarker(overlapCoverMarker);</p><p> });</p><p> });</p><p> </p><p> naver.maps.Event.addListener(recognizer, 'clickItem', function(e) {</p><p> recognizer.hide();</p><p> </p><p> if (overlapCoverMarker) {</p><p> unhighlightMarker(overlapCoverMarker);</p><p> </p><p> overlapCoverMarker = null;</p><p> }</p><p> });</p><p> </p><p> map.setZoom(7);</p><p></script></p><div>
</div><div>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
8년 전
다음 멀티마커(제가 쓰는거) 입니다 참고하세요~
키 바꾸시구요~
</p><p><script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=6f9c24bfbd98aa756c2ebea7cb4de552"></script></p><p><script></p><p>// 마커를 담을 배열입니다</p><p>var markers = [];</p><p> </p><p>var mapContainer = document.getElementById('map'), // 지도를 표시할 div </p><p> mapOption = {</p><p> center: new daum.maps.LatLng(37.3097544, 126.83003118), // 지도의 중심좌표</p><p> level: 5 // 지도의 확대 레벨</p><p> }; </p><p> </p><p>// 지도를 생성합니다 </p><p>var map = new daum.maps.Map(mapContainer, mapOption); </p><p> </p><p>// 검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다</p><p>var infowindow = new daum.maps.InfoWindow({zIndex:999});</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다 </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var positions = [</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span><?</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if(!$date2){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$date2 = date('Y-m-d');</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>} </p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$sql = "SELECT * FROM location_info where pnum = '$hp' and location_update = '$date2' order by idx asc ";</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$result = sql_query($sql);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>for($i=0;$row=sql_fetch_array($result);$i++){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>?></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>{</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>title: '<div id="a<?=$i;?>"><?=$row[time]."-".$row[minute];?></div>', </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>latitude: "<?=$row[lat];?>", </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>longitude: "<?=$row[lng];?>", </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>newAddress: "<?=$row[time].'시 '.$row[minute].'분';?><a href='<a href="<a href="http://donnena.why-be.co.kr/mobile/day_cording.php?hp=<?=$hp;?>&lat=<?=$row[lat];?>&lng=<?=$row[lng];?>&device=mobile" target="_blank" rel="noopener noreferrer">http://donnena.why-be.co.kr/mobile/day_cording.php?hp=<?=$hp;?>&lat=<?=$row[lat];?>&lng=<?=$row[lng];?>&device=mobile</a>"><a href="http://donnena.why-be.co.kr/mobile/day_cording.php?hp=<?=$hp;?>&lat=<?=$row[lat];?>&lng=<?=$row[lng];?>&device=mobile" target="_blank" rel="noopener noreferrer">http://donnena.why-be.co.kr/mobile/day_cording.php?hp=<?=$hp;?>&lat=<?=$row[lat];?>&lng=<?=$row[lng];?>&device=mobile</a></a>' target='_balnk'>링크</a>"</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>},</p><p><span class="Apple-tab-span" style="white-space:pre"> </span><? } ?></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>];</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>for (var i = 0; i < positions.length; i ++) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var listEl = document.getElementById('positionsList'), </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>menuEl = document.getElementById('menu_wrap'),</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>fragment = document.createDocumentFragment(), </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>bounds = new daum.maps.LatLngBounds(), </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>listStr = '';</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var placePosition = new daum.maps.LatLng(positions[i].latitude, positions[i].longitude),</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>marker = addMarker(placePosition, i), </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>itemEl = getListItem(i, positions[i], marker); // 검색 결과 항목 Element를 생성합니다</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>// LatLngBounds 객체에 좌표를 추가합니다</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>bounds.extend(placePosition);</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>// 마커와 검색결과 항목에 mouseover 했을때</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>// 해당 장소에 인포윈도우에 장소명을 표시합니다</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>// mouseout 했을 때는 인포윈도우를 닫습니다</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>(function(marker, title) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>daum.maps.event.addListener(marker, 'mouseover', function() {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>displayInfowindow(marker, title);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>daum.maps.event.addListener(marker, 'mouseout', function() {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>infowindow.close();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>itemEl.onmouseover = function () {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>displayInfowindow(marker, title);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>};</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>itemEl.onmouseout = function () {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>infowindow.close();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>};</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>})(marker, positions[i].title);</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span> fragment.appendChild(itemEl);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>// 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>listEl.appendChild(fragment);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>menuEl.scrollTop = 0;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>//map.setBounds(bounds);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p> </p><p>// 검색결과 항목을 Element로 반환하는 함수입니다</p><p>function getListItem(index, positions) {</p><p> var el = document.createElement('li'),</p><p> itemStr = '<span class="markerbg marker_' + (index+1) + '"></span>' +</p><p> '<div class="info">' ;</p><p> </p><p> itemStr += ' <span>' + positions.newAddress + '</span>'; </p><p> </p><p> el.innerHTML = itemStr;</p><p> el.className = 'item';</p><p> </p><p> return el;</p><p>}</p><p> </p><p>// 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다</p><p>function addMarker(position, idx, title) {</p><p> var imageSrc = '<a href="<a href="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png" target="_blank" rel="noopener noreferrer">http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png</a>"><a href="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png" target="_blank" rel="noopener noreferrer">http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png</a></a>', // 마커 이미지 url, 스프라이트 이미지를 씁니다</p><p> imageSize = new daum.maps.Size(36, 37), // 마커 이미지의 크기</p><p> imgOptions = {</p><p> spriteSize : new daum.maps.Size(36, 691), // 스프라이트 이미지의 크기</p><p> spriteOrigin : new daum.maps.Point(0, 10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표</p><p> offset: new daum.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표</p><p> },</p><p> markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imgOptions),</p><p> marker = new daum.maps.Marker({</p><p> position: position, // 마커의 위치</p><p> image: markerImage </p><p> });</p><p> </p><p> marker.setMap(map); // 지도 위에 마커를 표출합니다</p><p> markers.push(marker); // 배열에 생성된 마커를 추가합니다</p><p> </p><p> return marker;</p><p>}</p><p> </p><p>// 지도 위에 표시되고 있는 마커를 모두 제거합니다</p><p>function removeMarker() {</p><p> for ( var i = 0; i < markers.length; i++ ) {</p><p> markers[i].setMap(null);</p><p> } </p><p> markers = [];</p><p>}</p><p> </p><p>// 검색결과 목록 또는 마커를 클릭했을 때 호출되는 함수입니다</p><p>// 인포윈도우에 장소명을 표시합니다</p><p>function displayInfowindow(marker, title) {</p><p> var content = '<div style="padding:5px;z-index:1;">' + title + '</div>';</p><p> </p><p> infowindow.setContent(content);</p><p> infowindow.open(map, marker);</p><p>}</p><p></script></p><p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인