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

最新推荐文章于 2023-06-15 14:36:39 发布

tom_gy_

最新推荐文章于 2023-06-15 14:36:39 发布

阅读量2.3k

点赞数 2

分类专栏：百度地图WEB服务

本文链接：https://blog.csdn.net/tom_gy_/article/details/103828705

版权

百度地图WEB服务专栏收录该内容

6 篇文章 2 订阅

订阅专栏

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

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

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

<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
相关百度地图方面博文后面会持续更新，欢迎大家支持！

tom_gy_

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
百度地图-地理位置输入提示

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

扫一扫