AutocompleteOptions 对象规范
文本输入提示的参数。
属性
名称 | 类型 | 说明 |
---|---|---|
offset
|
Size
|
提示框与输入框的偏移值。 |
location
|
String
|
指定查询的城市范围,结果较少时自动扩充至全国。例如“北京市”。 |
zIndex
|
Number
|
提示框DOM节点的z-index属性 |
实例
本例子中,介绍如何设置文本提示输入的参数。
function init(){ var map = new qq.maps.Map(document.getElementById("container"),{ center: new qq.maps.LatLng(39.916527,116.397128), zoom: 13 }); //实例化自动完成 var ap = new qq.maps.place.Autocomplete(document.getElementById('place'), { offset: new qq.maps.Size(0, 5), location: '北京市' }); //调用Poi检索类。用于进行本地检索、周边检索等服务。 var searchService = new qq.maps.SearchService({ complete : function(results){ if(results.type === "CITY_LIST") { alert("当前检索结果分布较广,请指定城市进行检索"); return; } var pois = results.detail.pois; var latlngBounds = new qq.maps.LatLngBounds(); for(var i = 0,l = pois.length;i < l; i++){ var poi = pois[i]; latlngBounds.extend(poi.latLng); var marker = new qq.maps.Marker({ map:map, position: poi.latLng }); marker.setTitle(poi.name); } map.fitBounds(latlngBounds); } }); //添加监听事件 qq.maps.event.addListener(ap, "confirm", function(res){ searchService.search(res.value); }); }
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title>关键字输入提示参数设置</title> <style type="text/css"> *{ margin:0px; padding:0px; } body, button, input, select, textarea { font: 12px/16px Verdana, Helvetica, Arial, sans-serif; } html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } #container { width: 100%; height: 80%; } </style> <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=place"></script> <script> function init(){ var map = new qq.maps.Map(document.getElementById("container"),{ center: new qq.maps.LatLng(39.916527,116.397128), zoom: 13 }); //实例化自动完成 var ap = new qq.maps.place.Autocomplete(document.getElementById('place'), { offset: new qq.maps.Size(0, 5), location: '北京市' }); //调用Poi检索类。用于进行本地检索、周边检索等服务。 var searchService = new qq.maps.SearchService({ complete : function(results){ if(results.type === "CITY_LIST") { alert("当前检索结果分布较广,请指定城市进行检索"); return; } var pois = results.detail.pois; var latlngBounds = new qq.maps.LatLngBounds(); for(var i = 0,l = pois.length;i < l; i++){ var poi = pois[i]; latlngBounds.extend(poi.latLng); var marker = new qq.maps.Marker({ map:map, position: poi.latLng }); marker.setTitle(poi.name); } map.fitBounds(latlngBounds); } }); //添加监听事件 qq.maps.event.addListener(ap, "confirm", function(res){ searchService.search(res.value); }); } </script> </head> <body onload="init()"> <div id="container"></div> <p style="margin:5px"> <input style="width:200px;padding:3px 4px;" type="text" id="place" /> 输入地址,自动完成<br><br> 库引用方法:<br> <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&<span style="color:red">libraries=place</span>"</script> </p> </body> </html>