[WebAPI] 지도

gimyeondong 2020. 4. 23. 15:21

다음 지도

https://apis.map.kakao.com/

불러오는 중입니다...

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=5c1ac6e4f8248e8cc844af9be11e3183"></script>
        //admin 키 넣기
    </head>
    <body>
        <div id="map" style="width:500px;height:400px;"></div>
        <script>
            var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
            var options = { //지도를 생성할 때 필요한 기본 옵션
                center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
                level: 3 //지도의 레벨(확대, 축소 정도)
            };

            var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

        </script>
    </body>
</html>

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

불러오는 중입니다...

마커 추가하기

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=5c1ac6e4f8248e8cc844af9be11e3183"></script>
        <style>
            *{margin: auto;}
            p{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="map" style="width:500px;height:400px;"></div>
        <p>
            <button onclick="hideMarkers()">Clear</button>
            <button onclick="showMarkers()">Print</button>
        </p> 
        <script>
            var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
            var options = { //지도를 생성할 때 필요한 기본 옵션
                center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
                level: 3 //지도의 레벨(확대, 축소 정도)
            };

            var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

            // 지도를 클릭했을때 클릭한 위치에 마커를 추가하도록 지도에 클릭이벤트를 등록합니다
            kakao.maps.event.addListener(map, 'click', function(mouseEvent) {        
                // 클릭한 위치에 마커를 표시합니다 
                addMarker(mouseEvent.latLng);             
            });

            // 지도에 표시된 마커 객체를 가지고 있을 배열입니다
            var markers = [];

            // 마커 하나를 지도위에 표시합니다 
            addMarker(new kakao.maps.LatLng(33.450701, 126.570667));

            // 마커를 생성하고 지도위에 표시하는 함수입니다
            function addMarker(position) {

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

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

                // 생성된 마커를 배열에 추가합니다
                markers.push(marker);
            }

            // 배열에 추가된 마커들을 지도에 표시하거나 삭제하는 함수입니다
            function setMarkers(map) {
                for (var i = 0; i < markers.length; i++) {
                    markers[i].setMap(map);
                }            
            }

            // "마커 보이기" 버튼을 클릭하면 호출되어 배열에 추가된 마커를 지도에 표시하는 함수입니다
            function showMarkers() {
                setMarkers(map)    
            }

            // "마커 감추기" 버튼을 클릭하면 호출되어 배열에 추가된 마커를 지도에서 삭제하는 함수입니다
            function hideMarkers() {
                setMarkers(null);    
            } 

        </script>
    </body>
</html>