百度地圖api開發示例

<span style="white-space:pre">	</span><div id="r-result">請輸入:<input type="text" id="suggestId" size="20" value="" style="width:150px;" /></div>			
	<div id="allmap" style="height:300px;width:100%;"></div>
		<div style="width:500px; height:auto;">
			經度：<input type="text" class="text input-medium" name="locationx" id= "locationx" style = "width:350px;">
	</div>
	<div style="width:500px; height:auto;">
			緯度：<input type="text" class="text input-medium" name="locationy" id= "locationy"  style = "width:350px;">
	</div>
	<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

<pre name="code" class="javascript"><script type="text/javascript">
	// 百度地圖API功能
	function G(id) {
		return document.getElementById(id);
	}
	function showInfo(e){
		document.getElementById("locationx").value = e.point.lng;
		document.getElementById("locationy").value = e.point.lat;
		var now_point =  new BMap.Point(e.point.lng, e.point.lat );
		marker.setPosition(now_point);//設置覆蓋物位置

	}
	var city = document.getElementById('suggestId').value;

	var map = new BMap.Map("allmap");
	var point = new BMap.Point(121.622957, 38.919523);
	map.centerAndZoom(point, 17);
	map.addEventListener("click", showInfo);
	
	var marker = new BMap.Marker(point); //創建marker對象
	marker.enableDragging(); //marker可拖拽
	//拖拽結束事件
	marker.addEventListener("dragend", function(e){
	//獲取覆蓋物位置
	var o_Point_now =  marker.getPosition();
	var lng = o_Point_now.lng;
	var lat = o_Point_now.lat;
	//e.point.lng 地理經度。
	// e.point.lat 地理緯度。
	//alert(e.point.lng + "---, " + e.point.lat);
	get_lng_lat();
	})
	map.addOverlay(marker); //在地圖中添加marker

	function get_lng_lat(){
	//返回覆蓋物標註的地理座標。
	var o_Point_now =  marker.getPosition();
	var lng = o_Point_now.lng;
	var lat = o_Point_now.lat;
	document.getElementById("locationx").value = lng;
	document.getElementById("locationy").value = lat;
	}                  // 初始化地圖,設置城市和地圖級別。

	var ac = new BMap.Autocomplete(    //建立一個自動完成的對象
		{"input" : "suggestId"
		,"location" : map
	});

	ac.addEventListener("onhighlight", function(e) {  //鼠標放在下拉列表上的事件
	var str = "";
		var _value = e.fromitem.value;
		var 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;
		G("searchResultPanel").innerHTML = str;
	});

	var myValue;
	ac.addEventListener("onconfirm", function(e) {    //鼠標點擊下拉列表後的事件
	var _value = e.item.value;
		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		G("searchResultPanel").innerHTML ="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, 17);

	
	map.removeEventListener("click", showInfo);
	var marker = new BMap.Marker(pp); //創建marker對象
	map.addOverlay(marker); //在地圖中添加marker
	marker.enableDragging(); //marker可拖拽
	map.addEventListener("click", function(e){
	map.clearOverlays();
	var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
     map.addOverlay(marker);
	 marker.enableDragging(); //marker可拖拽
		document.getElementById("locationx").value = e.point.lng;
		document.getElementById("locationy").value = e.point.lat;
	});

	marker.addEventListener("dragend", function(e){
	//獲取覆蓋物位置
	var opn =  marker.getPosition();
	var lng = opn.lng;
	var lat = opn.lat;
	//e.point.lng 地理經度。
	// e.point.lat 地理緯度。
	//alert(e.point.lng + "---, " + e.point.lat);
	get_lng_lat1();
	})
	
	function get_lng_lat1(){
	//返回覆蓋物標註的地理座標。
	var opn =  marker.getPosition();
	var lng = opn.lng;
	var lat = opn.lat;
	document.getElementById("locationx").value = lng;
	document.getElementById("locationy").value = lat;
	}
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myValue);
		
	}

</script>

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