概述
刚好有一个项目,需要定位,并且需要可以手动设置地址,为了提高用户体验,需要加入搜索框的自动完成功能。
第一步 引用api脚本
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=**appid**"></script>
- 1
第二步 布局要实现自动完成的文本框
<input id="complete" type="text" placeholder="输入您要定位的地址" />
- 1
第三步 代码实现
AMap.plugin('AMap.Autocomplete',function(){//回调函数
var autoOptions = {
city: "", //城市,默认全国
input:"complete"//使用联想输入的input的id
};
var autocomplete= new AMap.Autocomplete(autoOptions);
AMap.event.addListener(autocomplete, "select", function(data){
//TODO 选择后的处理程序,data的格式见 附录
});
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
附录
{
"type": "select",
"poi": {
"id": "B000A80X4B",
"name": "北京市建设工程专业劳务发包承包交易中心(西城区政协北)",
"district": "北京市西城区",
"adcode": "110102",
"location": {
"I": 39.873013,
"C": 116.351675,
"lng": 116.351675,
"lat": 39.873013
},
"address": "广安门南街甲68号",
"typecode": "130100"
}
}