소개

Vue.js에서 Geocoder API를 호출 위도/경도를 얻어 보았습니다.

Geocoder API란?

주소를 지리 좌표(위도/경도)로 변환할 수 있는 API입니다.
참조 : htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 마 ps / 도쿠 멘들 온 / 게 오코 ぢ g / 오 ょ r ゔ ぃ w

사용 라이브러리 및 상세

사용 라이브러리 : @pderas/vue2-geocoder
사용 이유 : vue2의 geocoding용 플러그인에서 자주 사용되고 있다.
참조 : htps : // 기주 b. 이 m / P에서 S / ゔ 2-게 오고 r # Rea d

query 시에 설정할 수 있는 파라미터의 설명
(address_line_1) :  주소에서 검색할 때 사용할 매개변수
(address_line_2) : 여기도 주소에서 검색할 때 사용하는 파라미터이지만 (address_line_1)만으로 검색할 수 있습니다.
(city) : 도시의 이름 등으로 검색하고 싶을 때의 파라미터
(상태) : 나라를 미국 등의 주를 가진 국가로 한 경우의 주 검색시에 사용하는 파라미터
(zip_code) : 우편 번호로 검색하고 싶을 때의 파라미터  
(country) : 검색 대상이 되는 국가의 이름을 좁히기 위한 파라미터 [이번은 일본에 한정] 상기 파라미터를 이용하여 입력했을 때 위도/경도를 좁힙니다.

Geocoder API Request/Response

handleSetCity.ts

  private async handleSetCity() {
    let lat = 0
    let lon = 0

    const addressObj = {
      address_line_1: '東京都庁',
      address_line_2: '',
      city: '',
      state: '',
      zip_code:'',
      country: '日本'
    }

    (Vue as any).$geocoder.send(addressObj, (response: any) => {
      if (response.results) {
        lat = response.results[0].geometry.location.lat
        lon = response.results[0].geometry.location.lng
      }
    })
  }

Response

[
    {
        "address_components": [
            {
                "long_name": "45階",
                "short_name": "45階",
                "types": [
                    "subpremise"
                ]
            },
            {
                "long_name": "第一本庁舎",
                "short_name": "第一本庁舎",
                "types": [
                    "establishment",
                    "point_of_interest"
                ]
            },
            {
                "long_name": "東京都庁",
                "short_name": "東京都庁",
                "types": [
                    "premise"
                ]
            },
            {
                "long_name": "１",
                "short_name": "１",
                "types": [
                    "premise"
                ]
            },
            {
                "long_name": "８",
                "short_name": "８",
                "types": [
                    "political",
                    "sublocality",
                    "sublocality_level_4"
                ]
            },
            {
                "long_name": "２丁目",
                "short_name": "２丁目",
                "types": [
                    "political",
                    "sublocality",
                    "sublocality_level_3"
                ]
            },
            {
                "long_name": "西新宿",
                "short_name": "西新宿",
                "types": [
                    "political",
                    "sublocality",
                    "sublocality_level_2"
                ]
            },
            {
                "long_name": "新宿区",
                "short_name": "新宿区",
                "types": [
                    "locality",
                    "political"
                ]
            },
            {
                "long_name": "東京都",
                "short_name": "東京都",
                "types": [
                    "administrative_area_level_1",
                    "political"
                ]
            },
            {
                "long_name": "日本",
                "short_name": "JP",
                "types": [
                    "country",
                    "political"
                ]
            },
            {
                "long_name": "163-8001",
                "short_name": "163-8001",
                "types": [
                    "postal_code"
                ]
            }
        ],
        "formatted_address": "日本、〒163-8001 東京都新宿区西新宿２丁目８−１ 東京都庁 45階 第一本庁舎",
        "geometry": {
            "location": {
                "lat": 35.6898531,
                "lng": 139.6917321
            },
            "location_type": "ROOFTOP",
            "viewport": {
                "northeast": {
                    "lat": 35.6912020802915,
                    "lng": 139.6930810802915
                },
                "southwest": {
                    "lat": 35.6885041197085,
                    "lng": 139.6903831197085
                }
            }
        },
        "place_id": "ChIJnctryNSMGGARLv4MknPFseU",
        "plus_code": {
            "compound_code": "MMQR+WM 日本、東京都新宿区",
            "global_code": "8Q7XMMQR+WM"
        },
        "types": [
            "establishment",
            "point_of_interest",
            "tourist_attraction"
        ]
    }
]

다만, 실제로 위도/경도를 취득하는 경우에 사용하는 것은, Response의 geometry.location의 내용이 됩니다.

"geometry": {
  "location": {
    "lat": 35.6898531,
    "lng": 139.6917321
  },
・
・
・

Geocoder API 오류 처리

Geocoder API를 사용했을 때의 에러 핸들링에는, Geocoder API에 표준으로 돌아오는 [에러 메세지]를 사용하면 좋습니다.

status가 OK가 아닌 상태 코드를 반환하면 Geocoding 응답 객체에 error_message 필드가 있을 수 있습니다.
이 필드에는 특정 상태 코드 뒤에 있는 이유에 대한 자세한 정보가 들어 있습니다.
참조 : htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 마 ps / 도쿠 멘 타치 온 / 게 오코 ぢ g / 오 r ゔ ぃ w # S 타츠 s 코로 s

vue2-geocoder를 사용할 때의 오류 검증 결과

검색이 걸리지 않는 경우
response : {"results":[],"status":"ZERO_RESULTS"}

API_KEY를 비활성화한 경우
response : {"error_message":"This API project is not authorized to use this API.","results":[],"status":"REQUEST_DENIED"}

Geocoder API 횟수 제한

GCP에서 API별로 (Geocoding 전용) 횟수 제한을 설정할 수 있습니다.