百度地图之地址解析和浏览器定位以及添加可拖拽标注

完整版见https://jadyer.github.io/2014/08/06/baidu-map-api/

这里的百度地图demo包括了常见的：地址解析、浏览器定位、IP定位、可拖拽标注

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4itF2ygdKkIfshFlQggs7DZA"></script>


<input type="text" id="address"/>
<input type="button" value="地图查看" οnclick="showMap();"/>
<div id="lnglat" style="color:red;">当前坐标：0,0</div>
<div id="allmap" style="width:400px; height:400px; overflow:hidden; margin:0;"></div>


<script type="text/javascript">
/**
 * 百度地图API功能
 */
var map = new BMap.Map('allmap');              //创建Map实例
//<c:if test='${empty awardInfo.baiduMapLng}'>
//	map.centerAndZoom('哈尔滨市', 12);
//</c:if>
//<c:if test='${not empty awardInfo.baiduMapLng}'>
//	var point = new BMap.Point(${awardInfo.baiduMapLng}, ${awardInfo.baiduMapLat});
//	map.centerAndZoom(point, 18);
//	var marker = new BMap.Marker(point);
//	map.addOverlay(marker);
//	marker.enableDragging();
//	marker.addEventListener('dragend', function(e){
//		document.getElementById('lnglat').innerHTML = '当前坐标：' + e.point.lng + ", " + e.point.lat;
//	});
//</c:if>
//上面使用的是JSP中的C标签,适用于需要读取数据库中储存的坐标,然后将位置信息显示在地图中,并添加可拖拽标注
//var point = new BMap.Point(116.404, 39.915); //创建点坐标
//map.centerAndZoom(point, 15);                //初始化地图(设置中心点坐标和地图缩放级别)
map.centerAndZoom("哈尔滨市", 12);              //初始化地图(设置城市名和地图缩放级别)
map.addControl(new BMap.NavigationControl());  //添加平移缩放控件
map.addControl(new BMap.ScaleControl());       //添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom();                   //启用滚轮放大缩小
//map.disableDragging();                       //禁止地图拖拽
//map.enableDragging();                        //允许地图拖拽(默认为允许)


/**
 * 浏览器定位(状态码说明如下)
 * BMAP_STATUS_SUCCESS            : 检索成功,对应数值"0"
 * BMAP_STATUS_CITY_LIST          : 城市列表,对应数值"1"
 * BMAP_STATUS_UNKNOWN_LOCATION   : 位置结果未知,对应数值"2"
 * BMAP_STATUS_UNKNOWN_ROUTE      : 导航结果未知,对应数值"3"
 * BMAP_STATUS_INVALID_KEY        : 非法密钥,对应数值"4"
 * BMAP_STATUS_INVALID_REQUEST    : 非法请求,对应数值"5"
 * BMAP_STATUS_PERMISSION_DENIED  : 没有权限,对应数值"6"(自1.1新增)
 * BMAP_STATUS_SERVICE_UNAVAILABLE: 服务不可用,对应数值"7"(自1.1新增)
 * BMAP_STATUS_TIMEOUT            : 超时,对应数值"8"(自1.1新增)
 */
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
	console.log('浏览器定位的状态码为：' + this.getStatus());
	if(this.getStatus() == BMAP_STATUS_SUCCESS){
		var mk = new BMap.Marker(r.point);
		map.addOverlay(mk);
		map.panTo(r.point);
		document.getElementById('lnglat').innerHTML = '当前坐标：' + r.point.lng + ", " + r.point.lat;
	}else{
		//switch(this.getStatus()){
		//	case 6 : document.getElementById('lnglat').innerHTML = '请求未授权,无法提供定位服务'; break;
		//	default: document.getElementById('lnglat').innerHTML = '无法获取当前位置,您可移动地图查看'; break;
		//}
		new BMap.LocalCity().get(function(result){
			console.log('IP定位获取当前城市：' + result.name);
			map.setCenter(result.name);
		});
	}
},{enableHighAccuracy:true});


/**
 * 地图查看
 */
function showMap(){
	var address = document.getElementById('address').value;
	if('' == address){
		document.getElementById('lnglat').innerHTML = '请输入地址';
		return;
	}
	//创建地址解析器实例
	var myGeo = new BMap.Geocoder();
	//将地址解析结果显示在地图上,并调整地图视野
	myGeo.getPoint(address, function(point){
		if(point){
			map.centerAndZoom(point, 16);
			map.clearOverlays();                 //清除地图上所有的标记(map.removeOverlay(marker)可清除单个标注)
			var marker = new BMap.Marker(point); //创建标注
			map.addOverlay(marker);              //将标注添加到地图中
			marker.enableDragging();             //设置标注可拖拽(默认为不可拖拽)
			//百度坐标是先经度,再纬度,即Point(lng, lat)
			//谷歌坐标的顺序与百度恰好相反,是(lat, lng)
			//也可这样获取坐标-------------------->marker.getPosition().lng和marker.getPosition().lat;
			document.getElementById('lnglat').innerHTML = '当前坐标：' + point.lng + ", " + point.lat;
			//监听标注的拖拽事件,以便实时获取标注拖拽后的坐标
			marker.addEventListener('dragend', function(e){
				document.getElementById('lnglat').innerHTML = '当前坐标：' + e.point.lng + ", " + e.point.lat;
			});
		}
	}, '哈尔滨市');
}
</script>