네이버지도

네이버지도

QA

네이버지도

본문

https://sir.kr/g5_skin/13619

이거 스킨을 이용하려하는데

카테고리가 분류별로 a,b,c라고 이름을 지엇을경우

카테고리별로 마커이미지를 변경하고 싶습니다.ㅍㅠㅠ




<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.5164414, 126.9839501);

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: '/theme/aliza/images/newblue2.png',

                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

답변을 작성하시기 전에 로그인 해주세요.
전체 33
QA 내용 검색

회원로그인

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