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

最新推荐文章于 2023-12-28 16:09:07 发布

白鼠闹东京

最新推荐文章于 2023-12-28 16:09:07 发布

阅读量9.4k

点赞数

分类专栏： javascript 文章标签： javascript 高德地图搜索用户体验

本文链接：https://blog.youkuaiyun.com/sbt0198/article/details/52413069

版权

javascript 专栏收录该内容

62 篇文章

订阅专栏

本文介绍如何使用高德地图API实现地址自动完成功能，包括引用API脚本、布局文本框及代码实现等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

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

第一步引用api脚本

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=**appid**"></script>

第二步布局要实现自动完成的文本框

<input id="complete" type="text" placeholder="输入您要定位的地址" />

第三步代码实现

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的格式见 附录
    }); 
});

附录

{
    "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"
    }
}