利用百度地图API实现输入框地址联想功能

最新推荐文章于 2024-05-27 10:14:27 发布

猫萌萌

最新推荐文章于 2024-05-27 10:14:27 发布

阅读量8.1k

点赞数 2

分类专栏： JavaWeb笔记文章标签：百度地图地址联想输入提示自动补全地址

本文链接：https://blog.csdn.net/tjh625/article/details/81517438

版权

JavaWeb笔记专栏收录该内容

4 篇文章 1 订阅

订阅专栏

网上关于地址输入框联想自动补全的博文一大堆，开始我也是网上百度各种方法但是都没有成功，建议各位直接学习百度地图开放平台的官方API文档，下面给出百度地图开放平台的链接：

百度地图开放平台

进入百度地图开放平台的官网后，选择查看你所需要的开发文档，想要实现自己的功能就耐心慢慢学习对应的开发文档吧，想要偷懒一点或者不太了解其他相关知识其实直接复制DEMO示例里面的源代码就可以实现给出的示例功能。

下面我自己做的demo是一个网页中input标签输入框实现关键字地址联想功能，点击任意联想结果实现地址自动补全，截图如下：

我只在地址输入框写下了关键字“百度” ，然后就在这个输入框下面自动弹出联想结果面板。

HTML代码如下：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4IU3oIAMpZhfWZsMu7xzqBBAf6vMHcoa"></script>
        <!-- 参数ak=""是你的开发者密钥，在百度地图开放平台官网可免费获取 -->
    </head>
    <body>
        <div class="" id="">
            <input id="suggestId" name="" type="text" class="" placeholder="请输入地址" required="required">
        </div>
    </body>
</html>

<script type="text/javascript">
    loadMapAutocomplete("suggestId");
    function loadMapAutocomplete(mySuggestId) {
        Ac = new BMap.Autocomplete( //建立一个自动完成的对象
            {
                "input": suggestId,
            });
    }
</script>

我这个小demo非常简单直接，参考的是开发文档里面web开发的JavaScript API，每一个API文档里面都有很多示例DEMO。

地址联想功能参考的是输入提示示例demo，这里百度给出demo的源代码比较复杂。

实际上就单纯实现输入框的地址关键字联想功能而言，只需要我上面给出的几行代码就OK。想要详细了解百度地图开放给开发者的功能请各位耐心学习官方开发文档。

下面给出一个有价值的参考链接：

百度map开发初步及常见问题

猫萌萌

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
利用百度地图API实现输入框地址联想功能

网上关于地址输入框联想自动补全的博文一大堆，开始我也是网上百度各种方法但是都没有成功，建议各位直接学习百度地图开放平台的官方API文档，下面给出百度地图开放平台的链接：百度地图开放平台进入百度地图开放平台的官网后，选择查看你所需要的开发文档，想要实现自己的功能就耐心慢慢学习对应的开发文档吧，想要偷懒一点或者不太了解其他相关知识其实直接复制DEMO示例里面的源代...
复制链接

扫一扫