항해 99 1일차 (개인 공부)

본격적인 항해 99의 1일차가 시작됐다.

많은 것을 내려놓고 참여한 99일이 후회없는 99일이 될 수 있길 바라며

 

1.  API 지도 가져오기 (네이버)

네이버 클라우드 플랫폼의 Maps를 활용해 지도를 가져와 사용하는 방법을 공부해보았다.

console에서 Web Dynamic Map과 ,Geocoding을 선택해 console에 등록, client에서 script로 호출코드 작성

하단 코드블럭의 !!ID를 입력부분!! 에 console에 나와있는 client id를 입력함으로 호출을 마쳤다.

<script type="text/javascript"
        src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=!!ID를입력부분!!&submodules=geocoder"></script>

2.불러온 api지도를 정상적으로 서버에서 사용하려면 사용하려는 서버의 ip주소를 console에서 열어줘야한다.

서비스 환경 - web 서비스 URL에서 지정해준 ip주소만 정상적으로 api를 호출할 수 있다.

 

3. API 지도 활용하기

호출한 API는 하단의 코드블럭처럼들 여러 함수를 이용해

지도의 기본위치 , control , marker만들기 , marker에 말풍선 띄우기 등이 가능하다. 

 $(document).ready(function () {
            let map = new naver.maps.Map('map', { //네이버에서 지도를 만든다.
                center: new naver.maps.LatLng(37.4981125, 127.0379399), //위도 및 경도 값을 입력 , 이 위치가 지도의 중심
                zoom: 10, //zoom을 10정도
                zoomControl: true, //확대 축소버튼의 활성화
                zoomControlOptions: {
                    style: naver.maps.ZoomControlStyle.SMALL,
                    position: naver.maps.Position.TOP_RIGHT
                }
            });

 $(document).ready(function () {
let marker = new naver.maps.Marker({ //마커 함수를 활용해서 마커를 찍는다.
                position: new naver.maps.LatLng(37.4981125, 127.0379399), //마커를 찍을 위도 경도 설정
                map: map, //미리 만들어뒀던 map이라는 객체를 활용
                icon: "{{ url_for('static', filename='rtan_heart.png') }}"
            });
	}

document.ready.function(){
let infowindow = new naver.maps.InfoWindow({ //infowindow 함수를 이용하여 marker 윈도우를 띄운다.
                content: `<div style="width: 50px;height: 20px;text-align: center"><h5>안녕!</h5></div>`,
            };

 $(document).ready(function () { //marker를 열고 닫을 수 있게 한다.
            naver.maps.Event.addListener(marker, "click", function () { //네이버 맵의 이벤트를 등록하겠다.
                console.log(infowindow.getMap()); // 정보창이 열려있을 때는 연결된 지도를 반환하고 닫혀있을 때는 null을 반환
                if (infowindow.getMap()) { //null은 if문 안에서 false이다.
                    infowindow.close();
                } else {
                    infowindow.open(map, marker);
                }
            };
<div id="map"></div>  <!--네이버의 지도 api를 import할 때 id = "map"에 함수가 연결된다.-->

---

돌아보기

99일의 첫 시작은 감이 정확하게 잡히지 않았다.

많은 시간 뭔가를 한 것 같지만 뭐부터 어떻게 시작할지 몰라

고민한 시간이 더 많았던 것 같다.

프로젝트를 먼저 해야할지 , 지급해준 강의를 먼저 수강해야할지 아무 것도 모르는 상태에서

이정도 한 것 만으로도 스스로를 칭찬하고 

내일의 나는 고민할 시간에 코드를 한줄이라도 더 적는 내가되길 바란다.

내일은 아침일찍 일어나 회사에 사직서쓰러 가는날!!

3월 8일 오전 12:42 

항해 타이머 15:46:45