使用高德地图Javascript API实现搜索的自动完成

概述

刚好有一个项目，需要定位，并且需要可以手动设置地址，为了提高用户体验，需要加入搜索框的自动完成功能。

第一步 引用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"
    }
}