일러스트 지도에 마커삽입 구현 어떻게하나요??? 채택완료
one9601
1년 전
조회 3,734
일러스트로 그려넣은 지도에 마커를 잡입하고 마커에 호버효과정도 적용 하려고 하는데
카카오 지도로 API구현은 해봤는데 일러에는 넣어본적이 없어서요
보통 어떤식으로 구현하나요?
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
1년 전
예를 들어 다음과 같이 하면 되지 않을까 합니다.
참고 하셔서 원하시는 형식으로 구현하시면 될 것 같습니다.
</p>
<p> <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></p>
<p>
CSS 작성
</p>
<p>body {
margin: 0;
overflow: hidden;
}</p>
<p>#map-container {
position: relative;
width: 100vw;
height: 100vh;
background-image: url('your-map-image.jpg'); /* 일러스트 지도 이미지 경로 입력 */
background-size: cover;
}</p>
<p>.marker {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
cursor: pointer;
}</p>
<p>.info {
position: absolute;
top: 10px;
left: 10px;
background-color: white;
padding: 10px;
display: none;
}
스크립트 작성
</p>
<p>function showInfo() {
document.getElementById('info').style.display = 'block';
}</p>
<p>function hideInfo() {
document.getElementById('info').style.display = 'none';
}</p>
<p>document.getElementById('marker').addEventListener('mouseover', showInfo);
document.getElementById('marker').addEventListener('mouseout', hideInfo);
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인