Python(Flask)+React+SASS+mongoDB로 웹 서비스 제작하기 프로젝트(1-3) – Kakao Map API 지도 클릭 시 마커 출력 및 좌표 얻어오기

서비스를 제작하기 위해 Kakao Maps API를 연구하는 단계에서 지도에 마커(핀)을
찍는 방법과 마커가 찍힌 곳의 좌표를 얻어오는 방법을 알아봤다.

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

// 지도에 클릭 이벤트를 등록합니다
// 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {        
    
    // 클릭한 위도, 경도 정보를 가져옵니다 
    var latlng = mouseEvent.latLng; 
    
    // 마커 위치를 클릭한 위치로 옮깁니다
    marker.setPosition(latlng);
    
    var message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
    message += '경도는 ' + latlng.getLng() + ' 입니다';
    
    var resultDiv = document.getElementById('clickLatlng'); 
    resultDiv.innerHTML = message;
    
});

이를 React.js에 사용 가능하도록 ES6 문법으로 포팅하고 이를 이용해 위도와 경도값을 State를 이용해서 화면을 클릭하면 출력되도록 했다.

/*global kakao*/

import React, {Component} from 'react';
import './Map.css';

class Map extends Component {
    state = {  // state의 default 값을 설정
        x: 37.536172,
        y: 126.976978
    }
    componentDidMount(){    // 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드
        const script = document.createElement('script');
        script.async = true;    // 브라우저가 페이지를 파싱되는 동안에도 스크립트가 실행됨.
        script.src = "https://dapi.kakao.com/v2/maps/sdk.js?appkey=aa9483f57241f9b715de6016ff873e83&autoload=false";
        document.head.appendChild(script);
        
        script.onload = () => { // 페이지가 로드될 때 특정 함수를 호출시 사용
            kakao.maps.load(() => { // 가져온 api에 포함된 함수 실행
                let container = document.getElementById('map');
                let options = {
                    center: new kakao.maps.LatLng(37.536172, 126.976978),
                    level: 3,
                }
                
                let map = new kakao.maps.Map(container, options);

                // 마커가 표시될 위치입니다 
                let markerPosition  = new kakao.maps.LatLng(37.536172, 126.976978); 

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

                marker.setMap(map);
                // 기존의 함수 형태로 하면 this.state에서 this.state가 undefined이기 때문에 Arrow function을 이용해 상위 context의 객체를 this로 받아올 수 있도록 하여 현재 state 값을 변경
                kakao.maps.event.addListener(map, 'click', (mouseEvent) => {        
    
                    // 클릭한 위도, 경도 정보를 가져옵니다 
                    var latlng = mouseEvent.latLng; 
                    
                    // 마커 위치를 클릭한 위치로 옮깁니다
                    marker.setPosition(latlng);
                    
                    // 클릭한 위치의 위도와 경도를 state의 x와 y에 setState해주기
                    this.setState({
                        x: latlng.getLat(),  // this.state.x를 마커 위치의 위도로 값을 변경
                        y: latlng.getLng()   // this.state.y를 마커 위치의 경도로 값을 변경
                    });
                });
            });
        };
    }
    render(){
        return(
            <fragment>
                <div className="Map" id="map"></div>
                <h1>클릭한 위치의 위도는 : {this.state.x}<!-- x값 출력 --></h1>
                <h1>클릭한 위치의 경도는 : {this.state.y}<!-- y값 출력 --></h1>
            </fragment>
        );
    }
}

export default Map;

위와 같이 React.js 에서 마커를 찍고 클릭할 때 마다 마커의 위치를 변경시키며 그 마커의 위치를 출력할 수 있다.

props, state에 대한 부족한 설명은 다음에 다른 글에서 한다.