일러스트 지도에 마커삽입 구현 어떻게하나요???
본문
일러스트로 그려넣은 지도에 마커를 잡입하고 마커에 호버효과정도 적용 하려고 하는데
카카오 지도로 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로 호버 효과도 넣을 거구요.
제작의로에 맞기셔야 할것 같네요 의올라오면 신청할께요^^
답변을 작성하시기 전에 로그인 해주세요.