3/15 수 (Kakao Map으로 위치 서비스 만드는 중) TIL

(최종 프로젝트 진행중)

오늘 한 일

카카오 우편 서비스 API가 좌표 ↔ 주소 로 바로바로 전환해주는지. 특히 좌표를 주소로.

어제 만든 페이지를 손보고 새 페이지 작업에 들어갔다.

품앗이 신청 페이지(진행중)

품앗이 목록 조회 페이지

품앗이 상세 조회 페이지

kakao developers - REST API 키 발급받는 페이지:

※ 이하는 스스로 공부하며 적어둔 노트이며 불확실한 내용이 있을 수 있습니다. 학습용으로 적합하지 않음을 유념해주세요. ※

TypeORM findOne()을 하면 딸린 join도 하나밖에 안 가져온다

request 하나를 조회하기 위해 findOne()을 쓴 거였는데, request - user - cats[] 이렇게 연결된 관계에서 user에게 cat이 여러마리 있는데 자꾸 한 마리만 가져오는 것이다. 둘러봤더니 옆의 getRequests() 메소드는 여러 고양이 사진을 잘 가져오고 있었다. 차이는 find와 findOne 이라는 것 뿐. 그래서 바꿔봤더니 고양이 여러마리를 잘 join해옴을 확인할 수 있었다.

⇒ Many-to-One 관계의 테이블을 join하여 가져오고 싶을 땐, “One”쪽의 테이블로 ‘하나’를 조회하려고 할 때도 findOne이 아닌 find로 해줘야 ‘Many’쪽의 여러 데이터를 전부 가져오는 게 가능하다.

[카카오맵] Kakao developers 에서 key 받고 카카오 지도를 띄우기까지

하라는 대로 다 하고 (기본 튜터리얼은 아래에 적어두었다) 생긴 문제를 짧게 정리한다:

developers 앱을 하나 만들고 받은 4개 키들 중 REST API 키를 사용해야 하는 줄 알았는데 Javascript 키를 넣어야 했다.

내 웹 주소를 등록하는 과정을 거쳐야 했다. (http://localhost:3000)

(가장 중요) 웹 주소를 등록하고 나서 키를 재발급 받아야 했다.

⇒ 이 모든 것을 해주고 나니 제대로 지도가 띄워졌다..!!

아래는 짧고 쉬운 공식 튜터리얼

(일단 여기 가이드가 공식이고 좋다: https://apis.map.kakao.com/web/guide/)

주소를 검색하여 지도에 표시하는 예제 코드:

<h1>주소 검색 후 지도에 표시</h1>
<input type="text" id="sample5_address" placeholder="주소">
<input type="button" onclick="sample5_execDaumPostcode()" value="주소 검색"><br>
<div id="map" style="width:300px;height:300px;margin-top:10px;display:none"></div>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=내_카카오맵_키&libraries=services"></script>
<script>
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new daum.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표
            level: 5 // 지도의 확대 레벨
        };

    //지도를 미리 생성
    var map = new daum.maps.Map(mapContainer, mapOption);
    //주소-좌표 변환 객체를 생성
    var geocoder = new daum.maps.services.Geocoder();
    //마커를 미리 생성
    var marker = new daum.maps.Marker({
        position: new daum.maps.LatLng(37.537187, 127.005476),
        map: map
    });


    function sample5_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                var addr = data.address; // 최종 주소 변수

                // 주소 정보를 해당 필드에 넣는다.
                document.getElementById("sample5_address").value = addr;
                // 주소로 상세 정보를 검색
                geocoder.addressSearch(data.address, function(results, status) {
                    // 정상적으로 검색이 완료됐으면
                    if (status === daum.maps.services.Status.OK) {

                        var result = results[0]; //첫번째 결과의 값을 활용

                        // 해당 주소에 대한 좌표를 받아서
                        var coords = new daum.maps.LatLng(result.y, result.x);
                        // 지도를 보여준다.
                        mapContainer.style.display = "block";
                        map.relayout();
                        // 지도 중심을 변경한다.
                        map.setCenter(coords);
                        // 마커를 결과값으로 받은 위치로 옮긴다.
                        marker.setPosition(coords)
                    }
                });
            }
        }).open();
    }
</script>

(참고: https://postcode.map.daum.net/guide 의 다섯 개 유용한 예제 중 하나)

⇒ <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=내_카카오맵_키&libraries=services"></script>

이게 바로 카카오 지도를 받아오는 js 스크립트인데 services 라이브러리가 바로 주소-좌표 변환용 라이브러리라고 한다.

그 밖의 라이브러리:

clusterer: 마커를 클러스터링 할 수 있는 클러스터러 라이브러리 입니다.

services: 장소 검색 과 주소-좌표 변환 을 할 수 있는 services 라이브러리 입니다.

drawing: 지도 위에 마커와 그래픽스 객체를 쉽게 그릴 수 있게 그리기 모드를 지원하는 drawing 라이브러리 입니다.

[카카오맵] 주소(도로명, 동네명 등)로 위도와 경도 좌표 얻기

카카오맵 Docs

이곳에 따르면 geocoder.addressSearch(좌표, 콜백) 하면 이렇게 된다는 결과값 중

HTTP/1.1 200 OK
Content-Type: application/json;charset=UTF-8
{
  "meta": {
    "total_count": 4,
    "pageable_count": 4,
    "is_end": true
  },
  "documents": [
    {
      "address_name": "전북 익산시 부송동 100",
      "y": "35.97664845766847",
      "x": "126.99597295767953",
      "address_type": "REGION_ADDR",
      "address": {
        "address_name": "전북 익산시 부송동 100",
        "region_1depth_name": "전북",
        "region_2depth_name": "익산시",
        "region_3depth_name": "부송동",
        "region_3depth_h_name": "삼성동",
        "h_code": "4514069000",
        "b_code": "4514013400",
        "mountain_yn": "N",
        "main_address_no": "100",
        "sub_address_no": "",
        "x": "126.99597295767953",
        "y": "35.97664845766847"
      },
      "road_address": {
        "address_name": "전북 익산시 망산길 11-17",
        "region_1depth_name": "전북",
        "region_2depth_name": "익산시",
        "region_3depth_name": "부송동",
        "road_name": "망산길",
        "underground_yn": "N",
        "main_building_no": "11",
        "sub_building_no": "17",
        "building_name": "",
        "zone_no": "54547",
        "y": "35.976749396987046",
        "x": "126.99599512792346"
      }
    },
    ...
  ]
}

실험 결과,

var geocoder = new daum.maps.services.Geocoder();
...
function sample5_execDaumPostcode() {
    new daum.Postcode({
        oncomplete: function(data) {
            var addr = data.address; // 최종 주소 변수
						var extraAddress = data.bname? data.bname : ''; // 동 변수

            // 주소 정보를 해당 필드에 넣는다.
            document.getElementById("sample5_address").value = addr;
            document.getElementById("sample5_extraAddress").value = extraAddress;
		
            // 주소로 상세 정보를 검색
            geocoder.addressSearch(data.address, function(results, status) {
                // 정상적으로 검색이 완료됐으면
                if (status === daum.maps.services.Status.OK) {

                    var result = results[0]; //첫번째 결과의 값을 활용

                    // 해당 주소에 대한 좌표를 받아서
                    var coords = new daum.maps.LatLng(result.y, result.x);

										console.log(coords.documents) // undefined
										console.log(coords.meta); // undefined
										console.log('data.address.x: ', addr.x) // undefined
										console.log('data.x: ', data.x) // undefined
										console.log('results: ', results) // 어떤 결과
										console.log('result: ', results[0]) 
											// => {address: {…}, address_name: '서울 마포구 백범로16안길 21', address_type: 'ROAD_ADDR', road_address: {…}, x: '126.943246321233', …}

⇒ 이로 보건데 results가 바로 위의 docs에서 명시된 ‘documents’: [ {값1}, {값2}, … ]이고, results[0] = 값1 = { address_name, y, x, address_type, address, road_address }로 이루어진 결과값 하나하나인 것을 알았다.

⇒ 즉 경도와 위도를 따로따로 얻으려면 results[0][x], results[0][x] 이렇게 하면 되겠다!

[카카오맵] 어떤 좌표가 특정 영역에 포함되어 있는지 여부 알아내기

“카카오 map api 좌표 중심 반경 5km 찾기”로 검색하여 찾은 레퍼런스.

// 자바스크립트 코드 정리:
var markers = [ marker1, marker2, .... ];
var circle = new kakao.maps.Circle(options);
var center = circle.getPosition();
var radius = circle.getRadius();
var line = new kakao.maps.Polyline();

markers.forEach(function(marker) {
    // 마커의 위치와 원의 중심을 경로로 하는 폴리라인 설정
    var path = [ marker.getPosition(), center ];
    line.setPath(path);
    
    // 마커와 원의 중심 사이의 거리
    var dist = line.getLength();

    // 이 거리가 원의 반지름보다 작거나 같다면
    if (dist <= radius) {
        // 해당 marker는 원 안에 있는 것
    }
});

// HTML 코드: 
<body>
    <div id="map" style="width:100%;height:350px;"></div>

    <button onclick="showMarker(1000)">1km</button>
    <button onclick="showMarker(3000)">3km</button>
    <button onclick="showMarker(5000)">5km</button>
    <button onclick="showMarker(100000)">모두보기</button>

    <script>
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
            level: 7 // 지도의 확대 레벨
        };

        // 지도를 생성합니다
        var map = new kakao.maps.Map(mapContainer, mapOption);

        var current = new kakao.maps.Marker({
            map: map,
            position: new kakao.maps.LatLng(33.450701, 126.570667)
        });

        // 주소-좌표 변환 객체를 생성합니다
        var geocoder = new kakao.maps.services.Geocoder();
        var add = ['제주특별자치도 제주시 첨단로 242', '제주특별자치도 제주시 명림로 575-107', '제주특별자치도 제주시 516로 2870', '제주특별자치도 제주시 한북로 313'];
        var markers = [];
        for(let i=0; i <add.length; i++){
        geocoder.addressSearch(add[i], function(result, status) {
            // 정상적으로 검색이 완료됐으면
            if (status === kakao.maps.services.Status.OK) {
                var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
                // 결과값으로 받은 위치를 마커로 표시합니다
                var marker = new kakao.maps.Marker({
                    map: map,
                    position: coords
                });

                markers.push(marker);
            }
        });
    }

    var circle = new kakao.maps.Circle({});

    function showMarker(radius) {
        var center = map.getCenter();
        var line = new kakao.maps.Polyline();

        if(radius < 100000) {
            circle.setMap(map);
            circle.setPosition(center);
            circle.setRadius(radius);
        } else {
            // 전체보기
            circle.setMap(null);
        }

        markers.forEach(marker => {
            var path = [marker.getPosition(), center];
            line.setPath(path);

            // 마커와 원의 중심 사이의 거리
            var dist = line.getLength();

            // 이 거리가 원의 반지름보다 작거나 같다면
            if (dist <= radius) {
                // 해당 marker는 원 안에 있는 것
                marker.setMap(map);
            } else {
                marker.setMap(null);
            }
        });
    }
    </script>

Uploaded by N2T

오늘 한 일

TypeORM findOne()을 하면 딸린 join도 하나밖에 안 가져온다

[카카오맵] Kakao developers 에서 key 받고 카카오 지도를 띄우기까지

[카카오맵] 주소(도로명, 동네명 등)로 위도와 경도 좌표 얻기

[카카오맵] 어떤 좌표가 특정 영역에 포함되어 있는지 여부 알아내기

티스토리툴바