一 功能實現

1.新增map對應的div,如下:

<strong>	<div id="address_modal" style="background-color: #acacac">
									<div style="position: absolute; z-index: 999;">
										<input id="address_text" type="text"
											placeholder="請輸入路段名稱,如軟體園" 
											style="margin-left: 50px; width: 300px;" /> <input
											type="button" value="確認" ng-click="addressSearch()" /> <input
											type="button" value="取消" ng-click="addressCancel()" />
									</div>
									<div id="address-modal"
										style="position: absolute; width: 600px; height: 600px; border: 1px solid gray;">
									</div>
	</div></strong>
 

以上是一個包含輸入框，確認/取消按鈕以及百度map的對話方塊。程式碼很簡單,記得設定好對應控制元件的ID和樣式即可。

2.建立初始化方法

		//百度map初始化 
		map = new BMap.Map("address-modal");
		//百度地圖相關操作 
		function  onMapShow () {
			map.clearOverlays();//清空原來的標註
			map.centerAndZoom("福州", 12);

			map.addEventListener("tilesloaded", function() {
				map.enableScrollWheelZoom(); //啟用滾輪放大縮小，預設禁用
				map.enableContinuousZoom(); //啟用地圖慣性拖拽，預設禁用
				map.addControl(new BMap.NavigationControl()); //新增預設縮放平移控制元件
				map.addControl(new BMap.OverviewMapControl()); //新增預設縮略地圖控制元件
				map.addControl(new BMap.OverviewMapControl({
					isOpen : true,
					anchor : BMAP_ANCHOR_BOTTOM_RIGHT
				})); //右下角，開啟
			});

		}
 

第一句話將baiduMap與div繫結，切記不要寫在方法內導致多次初始化，否則容易出現地圖顯示不全的Bug...

        OnMapShow()方法很簡單，就是一些常見引數的設定，clearOverlays()會清空地圖上所有的標註，如不需要可以刪除。

3.根據輸入的地址查詢到座標，並標記在地圖上

			//建立地址解析器例項
	function setPlace(myValue) {
		var myGeo = new BMap.Geocoder();// 將地址解析結果顯示在地圖上,並調整地圖視野
		myGeo.getPoint(myValue, function(point) {
			if (point) {
				marker = new BMap.Marker(point);
				map.centerAndZoom(point, 14);
				map.addOverlay(marker);
				marker.enableDragging(); //標註可拖拽  

				markListener(marker);
			} else {
				alert("您選擇地址沒有解析到結果!");
			}
		}, "福州市");
	}

		//地圖監聽方法
	function markListener(marker) {
		marker.addEventListener(
						"click",
						function() {
							this.openInfoWindow(new BMap.InfoWindow(
											"<p style='font-size:14px;'>"
													+ document
															.getElementById("address_text").value
													+ "<br/><br/>經度：" + lng
													+ "<br/>緯度：" + lat + "</p>"));
						});
		//拖拽結束事件
		marker.addEventListener("dragend", function(e) {
			//獲取覆蓋物位置
			marker.closeInfoWindow();
			var o_Point_now = marker.getPosition();
			lng = o_Point_now.lng;
			lat = o_Point_now.lat;
		});
	}
 

setPlace(myValue)方法是根據傳入的myValue(實際地址，如福州市動物園)來獲取map座標，並由map.addOverlay(marker);方法來標記在地圖上。實際開發中可能會報出can't find coord錯，這個後面再講。 markListener(marker)方法是對地圖上的marker進行監聽繫結。裡面寫了兩個監聽方法，分別是對點選和拖拽的監聽。當點選按鈕時會彈出該marker點的地址名稱以及經緯度座標(標準),而拖拽事件監聽開始時會先取消點選時顯示的具體資訊(如果有的話),結束時則會獲取新位置的經緯度,以便彈出的具體資訊座標的重新整理。 這些都是非常簡單的功能，下面做一個小優化加強使用者體驗!

4. 加強搜尋，自動索引。

搜尋時應給出自動提示，如你在搜"動物園"時，輸入框input應該自動彈出聯想下拉如"福州市動物園","廈門市動物園"等等。使用者一點選便可以選中描述更加精準且定位會變得更加精確，下面給出程式碼：

		function  onMapShow () {
			.........
			var ac = new BMap.Autocomplete( //建立一個自動完成的物件
			{
				"input" : "address_text",
				"location" : map
			});
			ac.setInputValue("福建省");
			var myValue;
			ac.addEventListener(
							"onconfirm",
							function(e) { //滑鼠點選下拉列表後的事件
								map.clearOverlays();//清空原來的標註
								var _value = e.item.value;
								myValue = _value.province + _value.city
										+ _value.district + _value.street
										+ _value.business;
								document.getElementById("address_text").innerHTML = "onconfirm<br />index = "
										+ e.item.index
										+ "<br />myValue = "
										+ myValue;
								$scope.inAddress = myValue;
								setPlace(myValue);
							});

		}

在初始化的程式碼中新增如下程式碼。new BMap.Autocomplete建立一個自動完成的物件，他的引數"input"繫結的是你input輸入框的Id。該物件建立後你的input在發生輸入事件時就會自動顯示下拉列表。 ac.setInputValue("福建省")函式表示input預設顯示值，傳入一個str值即可，沒什麼好說的... 接下來繫結一個滑鼠點選下拉列表事件。點選後主要完成2件事：1 將地址賦值給input輸入框並取消下拉顯示 ; 2 呼叫setPlace(myValue)方法查詢具體位置並標記。 綜上，一個簡單易用的根據具體位置查詢map座標的功能就實現啦！

    二 開發中可能出現的問題

一  出現can't find coord....錯誤。 這個錯誤是在在呼叫上述setPlace(myValue)方法的函式

	myGeo.getPoint(myValue, function(point) {
			if (point) {
				.....
			} else {
				....
			}
		}, "福州市");

時出現的。主要原因可能是因為方法呼叫時機問題出現錯誤，比如在input輸入發生變換時就呼叫，會導致無法查詢到座標從而報出該錯誤。解決辦法是不要在輸入未完成時就呼叫查詢方法，最好在使用者成功點選input輸入框下拉提示後呼叫。 二  input輸入框下拉聯想提示彈不出來 在剛做這個功能時，發現new BMap.Autocomplete了，下拉提示死活就是不出現。查了很多辦法，發現是因為專案中baiduMap是建立在遮照層上的，導致下拉提示被擋住而非不顯示。 解決辦法：按F12仔細觀察找到下拉提示div的id(baiduMap用Js的辦法將這些div都寫好了)， Css新增

.tangram-suggestion-main {
	position: absolute;
	z-index: 12345;
	left: 542px;
	top: 128px;
	width: 300px;
}

tangram-suggestion-main是總的class，還有許多子Id，可以根據具體情況去針對性的修改！記住，所有發現下拉提示不能正常顯示的情況，都先去找是否被遮擋了，99%能找到div和id並通過設定CSS解決問題!