google API v3 (javascript) 之关键字自动完成提示

第一部分：蹩脚的自动提示

来自：Google Places Autocomplete API

（1）API导入：

<script type="text/javascript"   src="http://maps.google.com/maps/api/js?sensor=true"></script>

（2）请求格式：

地方自动填充”请求采用以下格式的 HTTP 网址：

https://maps.googleapis.com/maps/api/place/autocomplete/output?parameters

如：https://maps.googleapis.com/maps/api/place/autocomplete/xml?input=Peter+Luger&types;=establishment&bounds;=40.606654,-74.036865|40.744655（城市范围之内的提示）

https://maps.googleapis.com/maps/api/place/autocomplete/json?input=Vict&types;=geocode&region=CA&language;=fr&sensor;=true&key;=AIzaSyAiFpFd85eMtfbvmVNEYuNds5TEF9FjIPI

(*关键字提示input=key,这个适合于url后台请求使用).

（3）返回数据类型和参数说明:

json（建议）表示以 JavaScript 对象表示法 (JSON) 的形式输出
xml 表示以 XML 的形式输出
您需要用某些参数来发起“位置自动填充”请求。根据网址的标准，所有参数均使用字符 & (&) 分隔。下面枚举了这些参数及其可能的值。

必填参数
- input– 要搜索的文本字符串。“地方”服务会根据此字符串返回候选的匹配结果，并按照它们的相关程度进行排列。
- sensor – 表示发送“地方”请求的设备是否使用了位置传感器（如 GPS）来确定此请求中发送的位置。该值只能是 true 或 false
- key – 您的应用程序的 API 密钥。此密钥用于标识您的应用程序，以便进行配额管理。要创建 API 项目并获取密钥，请访问 API 控制台。
可选参数
offset – 输入字词中的字符位置，服务会在此位置上使用文本以进行预测。例如，如果输入为“Googl”且完成点为 3，则服务将会使用“Goo”进行匹配。通常，offset应设置为文本脱字符号的位置。如果未提供偏移，则服务将使用整个字词。
location – 您希望在其周围检索“地方”信息的纬度/经度。此参数必须是 google.maps.LatLng对象。
radius – 要在其范围内返回的“地方”结果的距离（以米为单位）。请注意，您可以将 radius 偏向结果设为指定的区域，但无法将结果完全限制在指定区域中。请参见下文的位置偏向。
language – 返回结果时所使用的语言。请参见支持的区域语言列表。请注意，我们会经常更新支持的语言，因此该列表可能并不详尽。如果未提供语言，则“地方”服务将会尝试使用发送请求的域的本地语言。
types – 要返回的“地方”结果的类型。请参见下文的地方类型。如果未指定类型，则系统会返回所有类型。

第二部分：好用的自动提示

（1）js导入参数：

在url上添加参数：libraries=places&v=3.8; 完整的如：

<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true&v=3.8"></script>

（2）查看最新的API 版本，如当前的v=3.8;使用它提供的类如：google.maps.places.Autocomplete ,google.maps.places.AutocompleteOptions 等等。

（3）查看示例，编写options并绑定至输入框：

i.创建autocomplete对象：

var defaultBounds =new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902,151.1759),
  new google.maps.LatLng(-33.8474,151.2631));

var input = document.getElementById('searchTextField');//输入框字段
var options ={
  bounds: defaultBounds,
  types:['establishment']
};

autocomplete =new google.maps.places.Autocomplete(input, options);

 ii.设置监听，根据内容提示显示结果：

google.maps.event.addListener(autocomplete,'place_changed',function(){
  var place = autocomplete.getPlace();
  if(place.geometry.viewport){
    map.fitBounds(place.geometry.viewport);
  }else{
    map.setCenter(place.geometry.location);
    map.setZoom(17);
  }
  var image =new google.maps.MarkerImage(
      place.icon,new google.maps.Size(71,71),
      new google.maps.Point(0,0),new google.maps.Point(17,34),
      new google.maps.Size(35,35));
  marker.setIcon(image);
  marker.setPosition(place.geometry.location);

  infowindow.setContent(place.name);
  infowindow.open(map, marker);
});

以上只是提供个人提点记忆使用，具体使用参考API及google官方示例。

posted on 2012-04-04 17:51 boonya 阅读(873) 评论(0) 编辑收藏举报