Kakao MAP 사용하기

카카오 개발자 등록 후 개인 javascript API 발급 후 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);

결과