百度地图-地理位置输入提示

本文主要是介绍百度地图-地理位置输入提示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

百度地图-地理位置输入提示

在做一些地点检索或者行程推荐的系统时，往往需要用户对地址信息进行输入，此时如果有智能化的输入提示根据用户的输入而进行相关的地理位置名称推送就会大大提示系统的使用流畅性。但如果单凭自己本地的数据库很难完成这种推荐，但利用百度地图开发平台提供的接口可以实现此功能，实现效果如下图：

在这里插入图片描述
要想实现此功能首先需要引入百度地图的网络接口：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

如果没有ak通过以下链接进行申请：http://lbsyun.baidu.com/apiconsole/key/create
准备一个文本输入框和一个div（供显示智能提示输入内容），再通过js进行控制即可实现此功能，具体实现代码如下：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}#l-map{height:300px;width:100%;}#r-result{width:100%;}</style><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的ak"></script><title>关键字输入提示词条</title>
</head>
<body><div id="r-result">请输入:<input type="text" id="test" size="20" style="width:150px;" /></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</body>
</html>
<script type="text/javascript">// 百度地图API功能function G(id) {return document.getElementById(id);}var ac = new BMap.Autocomplete({"input" : "test"});ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;}    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;}    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;G("searchResultPanel").innerHTML = str;});var myValue;ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件var _value = e.item.value;myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;});
</script>

代码中需要注意的是“var ac = new BMap.Autocomplete({“input” : “test”});”此处的“test”是需要监听的输入框的id，在鼠标放在下拉列表上的事件以及标点击下拉列表后的事件的两个函数中“G(“searchResultPanel”)”内容为显示智能提示输入内容div的id。
以上为笔者本人对百度地图-地理位置输入提示的一些使用理解，希望对读者有帮助。
更多有关百度地图-地理位置输入提示使用详情可查看官方服务文档：http://lbsyun.baidu.com/jsdemo.htm#a6_2
相关百度地图方面博文后面会持续更新，欢迎大家支持！

这篇关于百度地图-地理位置输入提示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！