반응형
Google 자동 완성 결과를 시/군만으로 제한하는 방법
저는 구글 자동 완성 플레이스 javascript를 사용하여 검색 상자에 제안된 결과를 반환합니다.제가 필요한 것은 입력된 문자와 관련된 도시와 국가만 보여주는 것입니다.그러나 구글 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&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
프랑수아 대통령의 답변은 한 나라의 모든 도시를 나열하는 결과를 낳는다.단, 국가 또는 국가 내의 모든 지역(도시 + 주 + 기타 지역 등)을 나열해야 하는 경우 유형을 변경하여 결과를 필터링할 수 있습니다.
국가의 도시만 나열
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
이것이 누군가에게 도움이 되기를 바랍니다.
이거 먹어봐
<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®ion=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/script"
이 값을 "region=in"(in=in)으로 변경합니다.
"http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=in" type="text/script"
기본적으로 승인된 답변과 동일하지만 새로운 유형 및 여러 국가의 제한으로 업데이트되었습니다.
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 Autocomplete 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 배열이 있음을 알 수 있습니다.각 오브젝트 내에는 'type' 배열이 포함되어 있으며, 이 'type' 배열 내에는 국가용 라벨 등 주소와 관련된 다양한 라벨이 표시됩니다.
나는 스스로 해결책을 찾았다.
var acService = new google.maps.places.AutocompleteService();
var autocompleteItems = [];
acService.getPlacePredictions({
types: ['(regions)']
}, function(predictions) {
predictions.forEach(function(prediction) {
if (prediction.types.some(function(x) {
return x === "country" || x === "administrative_area1" || x === "locality";
})) {
if (prediction.terms.length < 3) {
autocompleteItems.push(prediction);
}
}
});
});
이 솔루션은 도시와 국가만 보여줍니다.
국가의 경우 다음을 사용할 수 있습니다.
components=country:pak
https://maps.googleapis.com/maps/api/place/autocomplete/json?&input=${text-to-search}&key=${API_KEY}&language=en&components=country:pak
또한 국가별 제한으로 인해 지도를 확대/축소해야 합니다!
확대/축소 및 중심 파라미터만 사용하세요!;)
function initialize() {
var myOptions = {
zoom: countries['us'].zoom,
center: countries['us'].center,
mapTypeControl: false,
panControl: false,
zoomControl: false,
streetViewControl: false
};
... all other code ...
}
<html>
<head>
<title>Example Using Google Complete API</title>
</head>
<body>
<form>
<input id="geocomplete" type="text" placeholder="Type an address/location"/>
</form>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
<script>
$(function(){
$("#geocomplete").geocomplete();
});
</script>
</body>
</html>
자세한 내용은 이 링크를 참조하십시오.
도시에서는 이것을 시도해 볼 수 있다.
https://maps.googleapis.com/maps/api/place/autocomplete/json?input=new delhi&types=locality&key=Your_API_Key
대답
{
"predictions": [
{
"description": "New Delhi, Delhi, India",
"matched_substrings": [
{
"length": 9,
"offset": 0
}
],
"place_id": "ChIJLbZ-NFv9DDkRzk0gTkm3wlI",
"reference": "ChIJLbZ-NFv9DDkRzk0gTkm3wlI",
"structured_formatting": {
"main_text": "New Delhi",
"main_text_matched_substrings": [
{
"length": 9,
"offset": 0
}
],
"secondary_text": "Delhi, India"
},
"terms": [
{
"offset": 0,
"value": "New Delhi"
},
{
"offset": 11,
"value": "Delhi"
},
{
"offset": 18,
"value": "India"
}
],
"types": [
"locality",
"political",
"geocode"
]
},
{
"description": "New Delhi, Madhya Pradesh, India",
"matched_substrings": [
{
"length": 9,
"offset": 0
}
],
"place_id": "ChIJF6eOnlmqhTkR2f8IfiLL4bs",
"reference": "ChIJF6eOnlmqhTkR2f8IfiLL4bs",
"structured_formatting": {
"main_text": "New Delhi",
"main_text_matched_substrings": [
{
"length": 9,
"offset": 0
}
],
"secondary_text": "Madhya Pradesh, India"
},
"terms": [
{
"offset": 0,
"value": "New Delhi"
},
{
"offset": 11,
"value": "Madhya Pradesh"
},
{
"offset": 27,
"value": "India"
}
],
"types": [
"locality",
"political",
"geocode"
]
},
{
"description": "Delhi, NY, USA",
"matched_substrings": [
{
"length": 5,
"offset": 0
}
],
"place_id": "ChIJVS4Od-R43IkRReeLGEBFcv8",
"reference": "ChIJVS4Od-R43IkRReeLGEBFcv8",
"structured_formatting": {
"main_text": "Delhi",
"main_text_matched_substrings": [
{
"length": 5,
"offset": 0
}
],
"secondary_text": "NY, USA"
},
"terms": [
{
"offset": 0,
"value": "Delhi"
},
{
"offset": 7,
"value": "NY"
},
{
"offset": 11,
"value": "USA"
}
],
"types": [
"locality",
"political",
"geocode"
]
}
],
"status": "OK"
}
언급URL : https://stackoverflow.com/questions/8282026/how-to-limit-google-autocomplete-results-to-city-and-country-only
반응형
'source' 카테고리의 다른 글
| JavaScript 오류(Uncatched SyntaxError:예기치 않은 입력 종료) (0) | 2023.01.12 |
|---|---|
| nodejs 도킹된 앱이 mariadb 도킹된 데이터베이스에 연결할 수 없습니다. (0) | 2023.01.12 |
| PHP에서 현재 페이지의 URL을 가져오는 방법 (0) | 2023.01.12 |
| pip install -U에서 "-U" 옵션은 무엇을 의미합니까? (0) | 2023.01.12 |
| 새 테이블만 추가된 경우 회의실 데이터베이스 마이그레이션 (0) | 2023.01.12 |