GoogleMaps에서 클릭 한 도시 이름 얻기

Question

JavaScript에서 GoogleMaps API를 사용하여지도에서 클릭 한 도시의 이름 (및 위치)을 얻으려고합니다.

먼저 example에서 설명한대로 PointOfInterest Event 기능을 사용할 수 있지만 도시에서는 placeId이 필요하지 않습니다.

둘째, 나는 역 지오 코딩 메커니즘이 위치의 전체 주소를 얻을 수 here을 설명 사용했는데, 여기에서, 도시의 이름 (지역) 추출 :이 방법은 준

this.map.addListener('click', (event) => { 
    this.geocoder.geocode({ 
     location: event.latLng, 
    }, (results, status) => { 
     if(status === 'OK') 
     { 
      if(results && results.length) 
      { 
       const addressResult = results[0]; 

       if(addressResult.address_components) 
       { 
        addressResult.address_components.forEach((component) => { 
         if(component.types.includes('locality')) 
         { 
          console.log(component.long_name); 
         } 
        }); 
       } 
      } 
     } 
    }); 
}); 

을 이 지오 코더에 의해 반환 된 주소에 나타나는대로, 나는 아직도 도시의 이름을 얻고 en에지도 로케일을 설정에도 불구하고

• : 꽤 좋은 결과 그러나 그것은 또한 몇 가지 문제를 보여 주었다. 예를 들어 , 나는, 나는 뮌헨 대신 의 ( 뮌헨 의 독일어 이름)

• 클릭을 뮌헨있어 제네바 대신 의 제네바 (의 프랑스어 이름을 제네바)를 얻었다 도시, 클릭 한 위치가 다른 지역에 속한 경우 언젠가는 다른 도시를 얻습니다.

클릭하면 도시명을 알려 주시면 감사하겠습니다.

Answer 1

역 지오 코딩을 실행하면 서비스가 다른 유형의 결과를 반환합니다. 첫 번째는 일반적으로 가장 가까운 거리 주소이며, 그 다음에는 인근 지역, POI, 지역, 행정 구역 및 국가와 같은 다른 결과가 표시됩니다.

코드에서 첫 번째 결과 (가장 가까운 주소)를 선택하여 도시 이름을 가져옵니다. 이 경우 지오 코딩 서비스는 Maps JavaScript API 초기화에서 지정한 언어가 아닌 현지 언어로 된 거리 및 지역 이름을 반환한다는 점에 유의해야합니다. 이 블로그 게시물에서이 정책에 대해 읽을 수 있습니다 :이 규칙이 적용되지 않습니다 정치 단체에 대한

https://maps-apis.googleblog.com/2014/11/localization-of-street-addresses-in.html

을, 당신은 당신의 자바 스크립트 API 초기화에 지정된 언어로 형 지역 또는 행정 구역의 항목을 얻을 수 있도록.

영어로 지역 이름을 얻으려면 locality 유형별로 결과를 필터링하고 주소 구성 요소를 읽어서 지역 이름을 가져와야합니다.

영어로 지역 정보를 가져 오기 위해 코드를 약간 수정했지만, 변수 filtered_array에 트릭을 적어 둡니다.

var map; 
 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
     center: {lat: 47.295077, lng: 9.211874}, 
 
     zoom: 8 
 
    }); 
 

 
    var geocoder = new google.maps.Geocoder(); 
 

 
    map.addListener('click', (event) => { 
 
     geocoder.geocode({ 
 
     location: event.latLng, 
 
     }, (results, status) => { 
 
     if(status === 'OK') { 
 
      if(results && results.length) { 
 
       var filtered_array = results.filter(result => result.types.includes("locality")); 
 
       var addressResult = filtered_array.length ? filtered_array[0]: results[0]; 
 

 
       if(addressResult.address_components) { 
 
        addressResult.address_components.forEach((component) => { 
 
         if(component.types.includes('locality')) { 
 
          console.log(component.long_name); 
 
         } 
 
        }); 
 
       } 
 
      } 
 
     } 
 
    }); 
 
    }); 
 
}

#map { 
 
    height: 100%; 
 
} 
 
/* Optional: Makes the sample page fill the window. */ 
 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&language=en&callback=initMap" 
 
    async defer></script>

나는 희망이 도움이!