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

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

QA

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

답변 2

본문

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

 

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

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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 0
© SIRSOFT
현재 페이지 제일 처음으로