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

拼搏现实的明天。 2022-05-17 08:20 508阅读 0赞

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

[百度地图开放平台][Link 1]

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

> ![70][]

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

> ![70 1][]

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

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>
            
        </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。

> ![70 2][]

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

> ![70 3][]

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

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

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

[Link 1]: http://lbsyun.baidu.com/
[70]: /images/20220517/49f0ff564ce84e0d8ca310f8e81f59aa.png
[70 1]: /images/20220517/2b85fbe3bcf04c84af861154fe6160de.png
[70 2]: /images/20220517/baea598a3b9c486487c260388b360d9b.png
[70 3]: /images/20220517/d863a88685104d5eb7d3d1eae0cdefbb.png
[map]: https://blog.csdn.net/farmgank/article/details/51446833