百度图片BMAP技术实践：动态显示地址

地图显示功能相信大家并不陌生，当我们点外卖或打车时，选择地图上的某个区域，软件就会动态读取区域对应地址并进行显示。
其实整个过程全部可以在前端实现，无需调用任何接口。本功能实现依赖于百度地图API。文档地址跳转至https://developer.baidu.com/map/jsdemo.htm#a1_2

一、前端代码

1.1 先导入百度提供的js文件

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

1.2根据业务情况，初始化省、市、区下拉选择框后，我们可以进行地址选择。

<div class='row'>
	<div class='col-md-6 margin-bottom-15'>
		<label for='province' class='control-label'>
			省
		</label>
		<select id="province"  onchange="initcity($(this).val())" class='form-control'>
			<option>请选择</option>
		</select>
		
	</div>
</div>
<div class='row'>
	<div class='col-md-6 margin-bottom-15'>
		<label for='city' class='control-label' >
			市
		</label>
		<select id="city"  class='form-control'>
		<option>请选择</option>
		</select>
	</div>
</div>
<div class='row'>
	<div class='col-md-6 margin-bottom-15'>
		<label for='address' class='control-label' >
			地址
		</label>
		<select id="address"  class='form-control'>
		<option>请选择</option>
		</select>
	</div>
</div>
//点击后可触发显示位置功能
<button onclick="sear()">获取经纬度</button>

二、JS代码

//定义map参数并进行初始化设定
var map = new BMap.Map("container");    // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 18);  // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
	mapTypes:[
		BMAP_NORMAL_MAP,
		BMAP_HYBRID_MAP
	]}));	  

map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); 

//动态显示地址
function  sear(){
	var site=$("#province").find("option:selected").text()+$("#city").find("option:selected").text()+$("#address").val();
	alert(site);
	var myGeo = new BMap.Geocoder();
	// 将地址解析结果显示在地图上,并调整地图视野
	myGeo.getPoint(site, function(point){
		if (point) {
			$("#longitude").val(point.lng);
			$("#latitude").val(point.lat);
			map.centerAndZoom(point, 16);
			map.addOverlay(new BMap.Marker(point));
		}else{
			alert("您选择地址没有解析到结果!");
		}
	});
	
}