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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
일러스트 지도에 마커삽입 구현 어떻게하나요???

QA

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

본문

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

 

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

 

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

이 질문에 댓글 쓰기 :

답변 2

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

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


    <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 작성


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;
}

 

스크립트 작성


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로 호버 효과도 넣을 거구요. 

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

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

회원로그인

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