8/8 - 4주 프로젝트

Toy 48번 기본 연산자 혹은 조건 연사자만 사용하여 곱셈 ,나눗셈 구현

 

곱셈과 뺄셈 중간까지 구현 , 마무리 하는데로 포스팅 예정

---

카카오 맵에서 지도를 로드하고 지도의 init 좌표를 내 위치로 하는 구조 요청 페이지를 구현.

 

클릭으로 핀을 이동시키고 위치 확인을 하면 state 로 좌표가 저장된다. 저장하지 않을 시 현 위치를 좌표로 한다.

 

먼저 index.html 에 script 를 추가하고

  <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=카카오에서 발급해주는 개인 APIKEY &libraries=services,clusterer,drawing"
    ></script>

현재 좌표를 가지고 오기 위해서  navigator.geolocation.getCurrentPosition 함수 호출 (위 함수는 사용자의 현재 위치를 요청한다.)

 

 navigator.geolocation.getCurrentPosition 에서 받아올 수 있는 프로퍼티

coords.latitude	고도
coords.latitude	위도
coords.longitude	경도
coords.accuracy	위도/경도의 오차(m)
coords.altitudeAccuracy	고도의 오차(m)
coords.heading	방위(도)
coords.speed	속도(m/초) ㅍ

마지막으로 카카오 디벨로퍼에 sample 과 같이 작성해서 지도를 호출한다!

var mapContainer = document.getElementById('map'), // 지도를 표시할 div
          mapOption = {
            center: new kakao.maps.LatLng(lat, lang), // 지도의 중심좌표
            level: 3, // 지도의 확대 레벨
          };
        initLat = lat;
        initLang = lang;
        this.setState({
          lat: initLat,
          lang: initLang,
        });
        var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

        // 지도를 클릭한 위치에 표출할 마커입니다
        var marker = new kakao.maps.Marker({
          // 지도 중심좌표에 마커를 생성합니다
          position: map.getCenter(),
        });
        // 지도에 마커를 표시합니다
        marker.setMap(map);

        // 지도에 클릭 이벤트를 등록합니다
        // 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
        kakao.maps.event.addListener(map, 'click', function(mouseEvent: any) {
          // 클릭한 위도, 경도 정보를 가져옵니다
          var latlng = mouseEvent.latLng;

          // 마커 위치를 클릭한 위치로 옮깁니다
          marker.setPosition(latlng);

굉장히 친절한 카카오 sample 덕에 생각보다 쉽게 지도를 구현할 수 있었다.