当前位置:首页 > 网站建设 > 源码技巧 > 正文内容

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

热淘网2个月前 (10-15)源码技巧59

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

百度地图开放平台:https://lbsyun.baidu.com/
        进入百度地图开放平台的官网后,选择查看你所需要的开发文档,想要实现自己的功能就耐心慢慢学习对应的开发文档吧,想要偷懒一点或者不太了解其他相关知识其实直接复制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的源代码比较复杂。

https://lbsyun.baidu.com/jsdemo.htm#a6_2

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


<p>扫描二维码推送至手机访问。</p><p>版权声明:本文由<strong>网站标题</strong>发布,如需转载请注明出处。</p>

本文链接:https://www.retao5.com/yuanma/1512.html

标签: 百度地图
分享给朋友:

相关文章

友情链接代码

友情链接代码

[code]˂!--{eval $imglink .= "\n";}--˃˂!--{eval $txtlink .= "".$value[name]."\n";}--˃$imglink$txtlink...

当前位置:首页>>资讯"去掉这里的"资讯"!

当前位置:首页>>资讯"去掉这里的"资讯"!

步骤①根目录下找到 news.php找到 [list=1][*]$guidearr[] = array('url' =˃ geturl('action/news'),'name' =˃ $lang['...

首页js轮播,图片可后台控制。

首页js轮播,图片可后台控制。

统默认就4种flash轮播,样式比较单一。经常我们用一些js轮播替换,这样有利于seo。一般我们都采用ftp上传图片覆盖,操作比较麻烦。小想自己写了个js调用系统flash_data.xml,读取后台...

模块创建使用技巧

模块创建使用技巧

在创建模块处。。如果你选择了只获取数据[b]使用获得的模板内部调用代码[/b]注:模板代码此处不赘述。将上面获取的代码复制到 SupeSite 的模板文件中(默认模板的目录为 templates/de...

过滤ss模块调用乱七八糟的字符

过滤ss模块调用乱七八糟的字符

[code]function htmldecode($str){if(empty($str)) return;if($str=="") return $str;$str=dhtmlspecialcha...

如何实现SS中首页调用论坛图片,每主题只调用一张图片

如何实现SS中首页调用论坛图片,每主题只调用一张图片

[table][tr][td]目前,默认的会调用同一主题下的多张[b][color=#ff0000]图片[/color][/b],而出现标题重复的情况,对网站的体验不好。实际通过模块管理可以实现,只调...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。