SIR
목록으로

일러스트 지도에 마커삽입 구현 어떻게하나요??? 채택완료

one9601
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 4,005
답변 2
목록

일러스트로 그려넣은 지도에 마커를 잡입하고 마커에 호버효과정도 적용 하려고 하는데

 

카카오 지도로 API구현은 해봤는데 일러에는 넣어본적이 없어서요

 

보통 어떤식으로 구현하나요?

#javascript #jquery

답변 2개

채택된 답변
+20 포인트

예를 들어 다음과 같이 하면 되지 않을까 합니다.

참고 하셔서 원하시는 형식으로 구현하시면 될 것 같습니다.

Copy 
<div id="map-container">
        <div id="marker" class="marker" onmouseover="showInfo()" onmouseout="hideInfo()"></div>
    </div>
    <div id="info" class="info">
        <p>Marker Info</p>
    </div>
    <script src="script.js"></script>

 

CSS 작성

Copy 
body {
    margin: 0;
    overflow: hidden;
}

#map-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url('your-map-image.jpg'); /* 일러스트 지도 이미지 경로 입력 */
    background-size: cover;
}

.marker {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    cursor: pointer;
}

.info {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: white;
    padding: 10px;
    display: none;
}

 

스크립트 작성

Copy 
function showInfo() {
    document.getElementById('info').style.display = 'block';
}

function hideInfo() {
    document.getElementById('info').style.display = 'none';
}

document.getElementById('marker').addEventListener('mouseover', showInfo);
document.getElementById('marker').addEventListener('mouseout', hideInfo);

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

스크립트및 기타 코딩 해야 합니다. 간단 하게 정의하자면 ? 개인적으로 그린 그림을 깔고 그걸 쪼개서 링크될 좌표 를 지정 하겠죠? 그리고 css로 호버 효과도 넣을 거구요. 

제작의로에 맞기셔야 할것 같네요 의올라오면 신청할께요^^

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고