Places Autocomplete
Places Autocomplete （地点自动完成）
Intro
Intro （简介）
The Place Autocomplete service is a web service that returns place predictions in response to an HTTP request. The request specifies a textual search string and optional geographic bounds. The service can be used to provide an autocomplete functionality for text-based geographic searches by returning places such as businesses, addresses and points of interest as a user types. （位置自动完成服务是响应HTTP请求返回位置预测的Web服务。请求指定文本搜索字符串和可选的地理边界。该服务可用于通过将商家、地址和兴趣点等地点作为用户类型返回，为基于文本的地理搜索提供自动完成功能。）
How To Use
How To Use
As you know, Google APIs need some connections to Google services. Usually, it’s a script with google service URL. Let’s see what we need for the beginning. （如您所知， Google API需要与Google服务建立一些连接。 通常，这是一个带有Google服务URL的脚本。 让我们从一开始就看看我们需要什么。）
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>
As you see we use application key (AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA)for using Google API. In order to use it “Places API” should be enabled from google console. （如您所见，我们使用应用程序密钥（ AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA ）来使用Google API。要使用它，应从Google控制台启用“Places API”。）
When we type anything to see the autocomplete the request looks like this:
https://maps.googleapis.com/maps/api/place/autocomplete/output?parameters
Where output can be （输出可以在哪里）
json - (recommended) indicates output in JavaScript Object Notation (JSON) （- json - （推荐）表示JavaScript对象表示法(JSON)中的输出）
xml - indicates output as XML （- xml -表示输出为XML）
And the parameters can be （参数可以是）
offset - The position in the input term of the last character that the service uses to match predictions. （- offset -服务用于匹配预测的最后一个字符的输入项中的位置。）
location -The point around which you wish to retrieve place information. It must be specified as latitude, longitude. （-位置-您希望检索位置信息的点。必须指定为纬度、经度。）
radius - The distance (in meters) within which to return place results. （- RADIUS -返回位置结果的距离（以米为单位）。）
language - The language in which to return results. （- language -返回结果的语言。）
types - The types of place results to return. （要返回的地点结果的类型）
components - A grouping of places to which you would like to restrict your results. （- COMPONENTS -您希望限制搜索结果的地点分组。）
At last let’s see a simple example. （最后，让我们看一个简单的例子。）
<!DOCTYPE html>
<html>
<head>
<title>www.w3cdoc.com</title>
<style>
input {
height: 30px;
padding-left: 10px;
border-radius: 4px;
border: 1px solid rgb(186, 178, 178);
box-shadow: 0px 0px 12px #EFEFEF;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>
</head>
<body>
<input type="text" id="autocomplete"/>
<script>
var input = document.getElementById('autocomplete');
var autocomplete = new google.maps.places.Autocomplete(input);
</script>
</body>
</html>
There are some parameters which you can use for the autocomplete. You can even set what places you want to see in your autocomplete. Here is a list of those parameters. （有一些参数可用于自动完成。您甚至可以设置想要在自动完成中看到的位置。以下是这些参数的列表。）
geocode - The parameter is for getting only the geocoding. When we use it google will return us only geocodeing result. （-地理编码-该参数仅用于获取地理编码。当我们使用它时，谷歌只会返回我们的地理编码结果。）
address - In the result will be geocoding with address. （-地址-结果将使用地址进行地理编码。）
establishment - The API will return only business result. （-建立- API将仅返回业务结果。）
(regions) - this property is using to get result with following data.
locality sublocality postal_code country administrative_area_level_1 administrative_area_level_2 （- (regions) -此属性用于获取以下数据的结果。
locality sublocality postal_code 国家 Administrative_area_level_1 administrative_area_level_2）
- (cities) - the result will return with matching locality or administrative_area_level_3 . （- (cities) -结果将返回匹配的locality或administrative_area_level_3。）
Let’s see an example which Google service gives us. （让我们看一个Google服务为我们提供的示例。）
<!DOCTYPE html>
<html>
<head>
<title>www.w3cdoc.com</title>
<style>
input {
height: 30px;
padding-left: 10px;
border-radius: 4px;
border: 1px solid rgb(186, 178, 178);
box-shadow: 0px 0px 12px #EFEFEF;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>>
</head>
<body>
<input type="text" id="autocomplete"/>
<script>
var input = document.getElementById('autocomplete');
var autocomplete = new google.maps.places.Autocomplete(input,{types: ['(cities)']});
google.maps.event.addListener(autocomplete, 'place_changed', function(){
var place = autocomplete.getPlace();
})
</script>
</body>
</html>
If you look at the response you will see that google returns us a lot of data. We used JSON format in the example. Let’s see what the response looks like. （如果您查看回复，您会发现Google向我们返回了大量数据。我们在示例中使用了JSON格式。让我们来看看答案是什么样的。）
{
"html_attributions" : [],
"result" : {
"address_components" : [
{
"long_name" : "London",
"short_name" : "London",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Greater London",
"short_name" : "Gt Lon",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "United Kingdom",
"short_name" : "GB",
"types" : [ "country", "political" ]
}
],
"adr_address" : "\u003cspan class=\"locality\"\u003eLondon\u003c/span\u003e, \u003cspan class=\"country-name\"\u003eUK\u003c/span\u003e",
"formatted_address" : "London, UK",
"geometry" : {
"location" : {
"lat" : 51.5073509,
"lng" : -0.1277583
},
"viewport" : {
"northeast" : {
"lat" : 51.6723432,
"lng" : 0.148271
},
"southwest" : {
"lat" : 51.38494009999999,
"lng" : -0.3514683
}
}
},
"icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png",
"id" : "b1a8b96daab5065cf4a08f953e577c34cdf769c0",
"name" : "London",
"place_id" : "ChIJdd4hrwug2EcRmSrV3Vo6llI",
"reference" : "CnRtAAAAHhKqLtnNzYhCf0EcQjJ1tWcaoZ__MoId7QmWhnbZlXbREPsbEfxPtXSRX2VwoFEi2mhL8EV2nWIPG1NSmX_KEqVtnRWM6o8xSFw0oksq670OYaKgbP401RZ0ODhpJCPAnXJ9bTWJjMahzEWK4gc4ixIQw9LkaoH9xj_VE9dkiJRowBoUItoo-MyH4t_dcAjXRQKXRmtO3DY",
"scope" : "GOOGLE",
"types" : [ "locality", "political" ],
"url" : "https://maps.google.com/maps/place?q=London,+UK&ftid=0x47d8a00baf21de75:0x52963a5addd52a99",
"vicinity" : "London"
},
"status" : "OK"
}