百度地图JS API，自动完成输入框，点击地图获取位置并标注的示例 - 果酱园

推荐阅读

博客升级啦~~~！

博客升级啦~~~！

2025-10-11 14:57 36

Flutter 版的 authcode 加密/解密方法

Flutter 版的 authcode 加密/解密方法

2020-06-19 18:45 3816

Vue Router 动态加载路由后，刷新空白的问题（vue-element-admin）

Vue Router 动态加载路由后，刷新空白的问题（vue-element-admin）

2018-12-12 12:37 10240

CentOS6.4安装Swoole4.2 Gcc的问题-error: #error "GCC 4.8 or later required.

CentOS6.4安装Swoole4.2 Gcc的问题-error: #error "GCC 4.8 or later required.

2018-12-10 15:32 4039

百度地图JS API，自动完成输入框，点击地图获取位置并标注的示例

百度地图JS API，自动完成输入框，点击地图获取位置并标注的示例

2018-09-28 12:18 3437

百度地图技术

百度地图JS API，自动完成输入框，点击地图获取位置并标注的示例

2018-09-28 12:18 3437 更新于 2018-09-28 12:18

先上代码
```
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#allmap {
	height:400px;
	width:50%;
}
#search_place{
	width:300px;
}
</style>

<input type="text" class="input-text" id="search_place" placeholder="请输入地址">
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:200px;height:auto; display:none;z-index: 99999;"></div>
<div id="allmap"></div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度ak"></script>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
initBdMap('重庆市','search_place');
var map;
var myValue;
function initBdMap(citystr,addressId){
	//初始化bdmap
	map = new BMap.Map("allmap");
	map.centerAndZoom(citystr,14);
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
	map.enableScrollWheelZoom(true);//启鼠标滚轮缩放
	map.enableContinuousZoom();
	//点击获取经纬度和地址
	map.addEventListener("click", function(e){
		var pt = e.point;
		var geoc = new BMap.Geocoder();
		console.log(pt);
		map.clearOverlays();
		var tmpPoint = new BMap.Point(pt.lng, pt.lat);
		var marker = new BMap.Marker(tmpPoint); //按照地图点坐标生成标记
		map.addOverlay(marker);
		geoc.getLocation(pt, function(rs){
			//addressComponents对象可以获取到详细的地址信息
			var addComp = rs.addressComponents;
			var site = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
			console.log(site);
			$('#'+addressId).val(site);
		});
	});
	//输入地址提示
	var ac = new BMap.Autocomplete({"input": addressId , "location": map});
	ac.addEventListener("onhighlight", function (e) {
		var str = "";
		var _value = e.fromitem.value;
		var value = "";
		console.log(_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;
		$('#searchResultPanel').html(str);
	});
	
	ac.addEventListener("onconfirm", function (e) {
		var _value = e.item.value;
		myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
		console.log(myValue);
		$('#searchResultPanel').html("onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue);
		setPlace();
	});
}
//移动到选择的地点上
function setPlace() {
	map.clearOverlays();
	function myFun() {
		var pp = local.getResults().getPoi(0).point;
		map.centerAndZoom(pp, 18);
		map.addOverlay(new BMap.Marker(pp));
	}
	var local = new BMap.LocalSearch(map, {
		onSearchComplete: myFun
	});
	local.search(myValue);
}
</script>
```
更换百度ak，即可使用

[查看ak](https://lbsyun.baidu.com/apiconsole/key "查看ak")

注意事项

这段代码不要修改，是自动完成框的弹层，当然样式是可以改的
```
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:200px;height:auto; display:none;z-index: 99999;"></div>
```
关于自动完成弹出层不显示的问题（主要是在弹出框中不显示），请检查z-index

`initBdMap`方法第一个参数是初始化地图的显示城市，当然区县也是可以的。

第二个参数是搜索框的id，自动完成的弹层会自动显示在搜索框的下面

效果图

![](https://blog.jam00.com/uploads/article/201809/28/121723siutxlx62td5gedm.jpg)