일러스트 지도에 마커삽입 구현 어떻게하나요??? 채택완료
일러스트로 그려넣은 지도에 마커를 잡입하고 마커에 호버효과정도 적용 하려고 하는데
카카오 지도로 API구현은 해봤는데 일러에는 넣어본적이 없어서요
보통 어떤식으로 구현하나요?
답변 2개
채택된 답변
+20 포인트
2년 전
예를 들어 다음과 같이 하면 되지 않을까 합니다.
참고 하셔서 원하시는 형식으로 구현하시면 될 것 같습니다.
Copy
Marker Info
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);
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
2년 전
스크립트및 기타 코딩 해야 합니다. 간단 하게 정의하자면 ? 개인적으로 그린 그림을 깔고 그걸 쪼개서 링크될 좌표 를 지정 하겠죠? 그리고 css로 호버 효과도 넣을 거구요.
제작의로에 맞기셔야 할것 같네요 의올라오면 신청할께요^^
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인