[javascript] Google 자동 완성 결과를 도시 및 국가로만 제한하는 방법

Google 검색 자동 완성 장소 자바 스크립트를 사용하여 검색 상자에 제안 된 결과를 반환합니다. 필요한 것은 입력 한 문자와 관련된 도시와 국가 만 표시하는 것이지만 Google API는 필요하지 않은 일반적인 장소 결과를 많이 제공합니다. 결과는 도시와 국가 만 표시하도록 제한합니다.

다음 예제를 사용하고 있습니다.

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>

답변

당신은 국가 제한을 시도 할 수 있습니다

function initialize() {

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };

 var input = document.getElementById('searchTextField');
 var autocomplete = new google.maps.places.Autocomplete(input, options);
}

더 많은 정보:

ISO 3166-1 alpha-2 를 사용하여 결과를 특정 그룹으로 제한 할 수 있습니다. 현재 componentRestrictions를 사용하여 국가별로 필터링 할 수 있습니다.

국가는 ISO 3166-1 Alpha-2 호환 국가 코드의 두 문자로 전달되어야합니다.

공식적으로 할당 된 국가 코드

답변

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var options = {
        types: ['geocode'] //this should work !
      };
      var autocomplete = new google.maps.places.Autocomplete(input, options);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>

스 니펫 확장

var options = {
  types: ['geocode'] //this should work !
};
var autocomplete = new google.maps.places.Autocomplete(input, options);

다른 유형에 대한 참조 : http://code.google.com/apis/maps/documentation/places/supported_types.html#table2

답변

이 시도

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&region=in" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>

스 니펫 확장

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places “type =”text / javascript “

“region = in”(in = india)로 변경하십시오.

” http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=in”type = “text / javascript”

답변

답 국가에서 모든 도시를 목록에서 프랑수아 결과에 의해 주어진다. 그러나 국가의 모든 지역 (도시 + 주 + 기타 지역 등)을 나열해야하는 경우 유형을 변경하여 그에 따라 결과를 필터링 할 수 있습니다.

해당 국가의 도시 만 나열

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };

국가의 모든 도시, 주 및 지역 목록

 var options = {
  types: ['(regions)'],
  componentRestrictions: {country: "us"}
 };

식당, 상점 및 사무실과 같은 모든 시설 목록

  var options = {
      types: ['establishment'],
      componentRestrictions: {country: "us"}
     };

자세한 정보 및 옵션은

https://developers.google.com/maps/documentation/javascript/places-autocomplete

이것이 누군가에게 유용 할 수 있기를 바랍니다.

답변

기본적으로 허용되는 답변과 동일하지만 새로운 유형 및 여러 국가 제한으로 업데이트되었습니다.

function initialize() {

 var options = {
  types: ['(regions)'],
  componentRestrictions: {country: ["us", "de"]}
 };

 var input = document.getElementById('searchTextField');
 var autocomplete = new google.maps.places.Autocomplete(input, options);
}

사용 '(regions)'대신은 '(cities)'으로 잘 도시 이름으로 우편 번호로 검색 할 수 있습니다.

공식 문서, 표 3 참조 :
https://developers.google.com/places/supported_types

답변

Google 자동 완성 API를 약간 사용해 보았으며 결과를 국가로만 제한하는 가장 좋은 해결책은 다음과 같습니다.

var autocomplete = new google.maps.places.Autocomplete(input, options);
var result = autocomplete.getPlace();
console.log(result); // take a look at this result object
console.log(result.address_components); // a result has multiple address components

for(var i = 0; i < result.address_components.length; i += 1) {
  var addressObj = result.address_components[i];
  for(var j = 0; j < addressObj.types.length; j += 1) {
    if (addressObj.types[j] === 'country') {
      console.log(addressObj.types[j]); // confirm that this is 'country'
      console.log(addressObj.long_name); // confirm that this is the country name
    }
  }
}

반환 된 결과 객체를 보면 주소의 다른 부분을 나타내는 여러 객체를 포함하는 address_components 배열이 있음을 알 수 있습니다. 이러한 각 개체에는 ‘types’배열이 포함되며이 ‘types’배열 내에는 국가 별 주소를 포함하여 주소와 관련된 다른 레이블이 표시됩니다.

답변

또한 국가 제한으로 인해지도를 확대 / 축소하고 가운데에 배치해야합니다!

줌 및 가운데 매개 변수 만 사용하십시오! 😉

function initialize() {
  var myOptions = {
    zoom: countries['us'].zoom,
    center: countries['us'].center,
    mapTypeControl: false,
    panControl: false,
    zoomControl: false,
    streetViewControl: false
  };

  ... all other code ...

}