테스트 사이트 - 개발 중인 베타 버전입니다

카카오맵 마커와 텍스트 질문드립니다. 채택완료

이름없음55 2년 전 조회 2,777

카카오맵 마커와 텍스트 질문드립니다.

카카오맵 마커와 텍스트를 검색해보니까 정적인 지도만 나왔는데

원래 카카오맵 퍼오면 드래그하거나 마우스휠 돌리면 움직이는 동적인 지도가 나오잖아요

거기서는 마커와텍스트가 안되나요?

제가 소스를 넣어봤는데 마커와 텍스트가 안나와서요.

 

</p>

<p><script>

    // 이미지 지도에 표시할 마커입니다

    // 이미지 지도에 표시할 마커를 아래와 같이 배열로 넣어주면 여러개의 마커를 표시할 수 있습니다 

    var markers = [

        {

            position: new kakao.maps.LatLng(위도, 경도)

        },

        {

            position: new kakao.maps.LatLng(위도, 경도), 

            text: '텍스트를 표시할 수 있어요!' // text 옵션을 설정하면 마커 위에 텍스트를 함께 표시할 수 있습니다     

        }

    ];</p>

<p>    var mapContainer  = document.getElementById('map'), // 이미지 지도를 표시할 div  

        mapOption = { 

            center: new kakao.maps.LatLng(위도, 경도), // 이미지 지도의 중심좌표

            level: 3, // 이미지 지도의 확대 레벨

            marker: markers // 이미지 지도에 표시할 마커 

        };    </p>

<p>    // 이미지 지도를 생성합니다

    var map = new kakao.maps.Map(mapContainer, mapOption);

</script></p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
m
2년 전

</p>

<pre>
<code data-lang="js">// 마커가 표시될 위치입니다 
var markerPosition  = new kakao.maps.LatLng(위도, 경도); 

// 마커를 생성합니다
var marker = new kakao.maps.Marker({
    position: markerPosition
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

var iwContent = '<div style="padding:5px;">Hello World! 
<a href="<a href="https://map.kakao.com/link/map/Hello" target="_blank" rel="noopener noreferrer">https://map.kakao.com/link/map/Hello</a> World!,33.450701,126.570667" style="color:blue" target="_blank">큰지도보기</a> <a href="<a href="https://map.kakao.com/link/to/Hello" target="_blank" rel="noopener noreferrer">https://map.kakao.com/link/to/Hello</a> World!,33.450701,126.570667" style="color:blue" target="_blank">길찾기</a></div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
    iwPosition = new kakao.maps.LatLng(위도, 경도); //인포윈도우 표시 위치입니다

// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
    position : iwPosition, 
    content : iwContent 
});
  
// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
infowindow.open(map, marker); </code></pre>

<p>

공식 문서 

https://apis.map.kakao.com/web/sample/markerWithInfoWindow/

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인