GameWith Advent Calendar 2018

이 문서는 GameWith Advent Calendar 2018의 3 일째입니다!

소개

GoogleMap에서 지명을 입력하고 검색하면 핀이 서서 위도 경도를 얻는 것을 Vue.js를 이용하여 구현했습니다.



여기 에서 거동을 시도할 수 있습니다.

전제

Vue version 2.5.7

Google Maps Api 등록

구현

HTML

지명을 입력하기 위해 input 태그와 검색을 트리거하는 button 태그와 GoogleMap용 div 태그입니다.

<input type="text" v-model="address">
<button type="button" @click="mapSearch">検索</button>
<div id="map"></div>

자바스크립트

지명 검색은 Geocoding 를 이용합니다.
google.map.Geocoder() 에서 Geocoder Object 를 만들고 geocode() 에서 검색합니다.
geocode 의 최초의 인수에는 입력된 지명을 건네줍니다.

건네줄 수 있는 인수는 아래와 같은 객체로, 위도 경도등도 건네줄 수 있습니다.

{
 address: string,
 location: LatLng,
 placeId: string,
 bounds: LatLngBounds,
 componentRestrictions: GeocoderComponentRestrictions,
 region: string
}

검색 처리가 끝나면 두 번째 인수의 함수가 실행됩니다.
results 에 건너는 것은 하기 오브젝트로, 지명등이 위도 경도로부터 역인도로 취득을 할 수 있습니다.
results[0].geometry.location 를 마커 객체에 전달하여 고정할 수 있습니다.

results[]: {
 types[]: string,
 formatted_address: string,
 address_components[]: {
   short_name: string,
   long_name: string,
   postcode_localities[]: string,
   types[]: string
 },
 partial_match: boolean,
 place_id: string,
 postcode_localities[]: string,
 geometry: {
   location: LatLng,
   location_type: GeocoderLocationType
   viewport: LatLngBounds,
   bounds: LatLngBounds
 }
}

기타 자세한 내용은 여기 .

new Vue({
  el: '#wrapper',
  mounted() {
    this.map = new google.maps.Map(document.getElementById('map'));
    this.geocoder = new google.maps.Geocoder();
  },
  data() {
    return {
      map: {},
      marker: null,
      geocoder: {},
      address: ''
    }
  },
  methods: {
    mapSearch() {
      this.geocoder.geocode({
        'address': this.address
      }, (results, status) => {
        if (status === google.maps.GeocoderStatus.OK) {
          this.map.setCenter(results[0].geometry.location);
          // 緯度経度の取得
          // results[0].geometry.location.lat();
          // results[0].geometry.location.lng();
          this.marker = new google.maps.Marker({
            map: this.map,
            position: results[0].geometry.location
          });
        }
      });
    }
  },
});

끝에

지명으로부터의 검색이 마음대로 어려운 이미지를 가지고 있었습니다만, 과연 GoogleMap!

Ingress나 포켓 GO가 유행하고 있습니다만, 단말의 성능이 올라 왔으므로 지도계의 어플리가 앞으로 점점 늘어날 것 같네요!