JavaScript API

AutocompleteOptions 对象规范

文本输入提示的参数。

属性

名称	类型	说明
offset	Size	提示框与输入框的偏移值。
location	String	指定查询的城市范围，结果较少时自动扩充至全国。例如“北京市”。
zIndex	Number	提示框DOM节点的z-index属性

实例

本例子中，介绍如何设置文本提示输入的参数。

<!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>

在线试一试

这篇文章对您解决问题是否有帮助？

已解决

未解决