FE-9주차 (0601)

선민·2023년 6월 1일

JavaScript UDR frontend 언더독레볼루션

FrontEnd_TIL

목록 보기

6/8

📂 가상환경 설정

python -m venv venv_django_kakaomap

📂 장고 설치하기

☠️ 맥북인 사람 참고 ☠️

pip install django : 장고 설치
pip install -r requirements.txt ➡️ 실제로는 백엔드와 협업해야하기 때문에 이걸 추천

📂 DB 생성

python manage.py makemigrations

python manage.py migrate 
python manage.py runserver

📂 카카오맵 랜딩페이지 생성

<body>
    <h1>망고빙수 먹으러 신라호텔</h1>
    <div id="map" style="width:500px;height:400px;"></div>

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=890eb7fd7b55736becc3388f215623f7"></script>
    <script>
        var container = document.getElementById('map');
        var options = {
            center: new kakao.maps.LatLng(37.555972, 127.005226),
            level: 2
        };

        var map = new kakao.maps.Map(container, options);
    </script>
</body>

📂 카카오맵 마커에 클릭 이벤트 등록

<body>
    <h1>망고빙수 먹으러 신라호텔</h1>
    <div id="map" style="width:500px;height:400px;"></div>

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=890eb7fd7b55736becc3388f215623f7"></script>
    <script>
        var container = document.getElementById('map');
        var options = {
            center: new kakao.maps.LatLng(37.555972, 127.005226),
            level: 2
        };

        var map = new kakao.maps.Map(container, options);

        // 마커를 표시할 위치입니다 
        var position =  new kakao.maps.LatLng(37.555972, 127.005226);

        // 마커를 생성합니다
        var marker = new kakao.maps.Marker({
        position: position,
        clickable: true // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
        });

        // 아래 코드는 위의 마커를 생성하는 코드에서 clickable: true 와 같이
        // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
        // marker.setClickable(true);

        // 마커를 지도에 표시합니다.
        marker.setMap(map);

        // 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
        var iwContent = '<div style="padding:5px;">먹고싶다</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
            iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

        // 인포윈도우를 생성합니다
        var infowindow = new kakao.maps.InfoWindow({
            content : iwContent,
            removable : iwRemoveable
        });

        // 마커에 클릭이벤트를 등록합니다
        kakao.maps.event.addListener(marker, 'click', function() {
            // 마커 위에 인포윈도우를 표시합니다
            infowindow.open(map, marker);  
    
        });
    </script>
</body>

선민

안녕하세요ꯁ

이전 포스트

FE-8주차 (0525)

다음 포스트

FE-9주차 (0601)

FrontEnd_TIL

📂 가상환경 설정

📂 장고 설치하기

📂 DB 생성

📂 카카오맵 랜딩페이지 생성

📂 카카오맵 마커에 클릭 이벤트 등록

FE-8주차 (0525)

React TIL #1

0개의 댓글