百度地圖之地址解析和瀏覽器定位以及添加可拖拽標註

完整版見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>