百度地图JS API,自动完成输入框,点击地图获取位置并标注的示例
2018-09-28 12:18 浏览(1277

先上代码

<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


注意事项

这段代码不要修改,是自动完成框的弹层,当然样式是可以改的

<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:200px;height:auto; display:none;z-index: 99999;"></div>

关于自动完成弹出层不显示的问题(主要是在弹出框中不显示),请检查z-index


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

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

效果图


评论(2)

Kiwi2021

百度地图API使用条款

百度地图API使用条款(以下称为“本条款”),SG飞艇是开发者与百度之间的正式协议,开发者调用百度地图API服务时应事先点击确认同意。为使开发者更好地使用百度地图API服务,制定相关条款与条件,以资共同遵守。当开发者使用任一百度地图API服务时,应保证具备本协议要求的全部资质与权利,并同意本协议的全部内容。

术语解释:
1.开发者,是指调用百度地图API服务的企业或个人,以下称为“开发者”或者“您”。

2.百度地图API,是指百度地图的应用程序接口,由百度自主研发、独立拥有与运营,以下称为“API”。

3.百度地图API服务,是指在遵守本条款约定的条件下,通过API接口调用的方式,在您的网站上显示百度地图图片、进行地点搜索、路线查询、导航展示、语音播报、离线数据下载、交通流量显示、发送短信分享地理位置信息等,以下称为“本服务”。

4.数据,是指来源于百度地图的所有信息,包括但不限于:POI相关数据、导航离线数据、线路信息、图片、程序、模块或功能等。

一、服务介绍
1.您仅可使用在百度地图“LBS开放平台”API文档中所列明开放的API功能,链接地址为:http://developer.baidu.com/map/ ,如链接地址发生变化,百度将尽最大努力在百度地图相关网站进行公示。

2.您仅可对数据进行展示,不得直接存取、离线存储、使用、或直接存储在开发者的服务器上。。

3.百度对于地图的数据与格式保有全部权利,有权根据需要对数据或格式进行调整,百度会尽最大努力提前在相关页面进行公示。

  1. 您在开始使用该本服务时及使用该本服务期间,向百度地图提供的所有信息都是正确的和最新的,极速赛车包括但不限于开发者名称、联系方式、邮箱等,如有变更,应及时更新。

  2. 百度保留发布 API 后续版本的权利,为了得到更好的服务,建议您尽可能获得并使用最新版API。百度可能需要不定期修改本条款,您可以随时在 http:// openapi.baidu.com/map 上查看。如您无法接受修改,可随时停止使用本服务;如果您继续在任何网站上使用本服务,将被视为接受修改。

  3. 为平衡服务器负载压力,为您与开发者、其他网络用户提供更好的服务,天津快乐十分百度对您每天所发出的本服务数据请求的指令可能设定上限,有权根据服务器的运行情况随时调整,并不负有事先通知的义务。

9-10 13:22 0 回复

Kiwi2021

Javascript API
产品简介
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,天津快乐十分可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。
百度地图JavaScript API支持HTTP和HTTPS极速赛车,免费对外开放,可直接使用。接口使用无次数限制。在使用前,您需先申请密钥(ak)才可使用。在您使用百度地图JavaScript API之前,请先阅读百度地图API使用条款。任何非营利性应用请直接使用,商业应用请参考使用须知。

注意:JavaScript API v3.0 是在 v2.0 的基础上进行开发的,并针对2.0的一些接口进行了升级,SG飞艇为开发者提供更完善的服务。v3.0的绝大部分接口向下兼容,开发者仅需要修改版本参数 (v=3.0) 就可以切换到JavaScript API v3.0版本。具体版本差异请参考服务版本说明书。

作为开发者用高德抓取过公交线路,城市拥堵,气象等数据。用百度抓取过街景数据,静态地图,行车路径等数据。总体来看,两者在web请求方面差不多,但是高德在数据文档,案例,返回数据结构方面更明确清晰,更容易上手。百度在这方面存在明显不足,用百度api开发调试则需要花大量精力来数据结构查询,调参。一些服务文档也写的不够清晰。但百度的优点在于POI啊,功能多一些,而且能提供街景图,这个高德还真没有。但是高德给开发者的数据访问额度好像稍微高一些。我觉得吧,如果是基本功能应用,比如路径搜索,定位,路网状态啥的,推荐高德。如果是需要用到POI数据,或者街景地图的话,就不得不用百度啦。

作者:Dinomousky

9-10 13:19 0 回复
发布评论
回复X
聊天室(0