最近做的項目中涉及到根據一個地名來查找地圖上的位置，並找出最相近的一個地址的座標，我通過一個JSAPI來實現，並標註所有相關的地址的座標；
同時，如果未查到改地址，則在頁面上手工輸入一個新地址來進行查找。
其中的地址是通過PHP寫進去的，如果不想使用動態寫入方法的話也可以通過javascript來接收一個地址參數，並通過decodeUrI方式解析出來後，直接調用百度地圖接口來搜索地圖上的位置。
主要使用了 JSAPI的 LocalSearch 以及其回調方法，用的百度地圖JSAPI版本爲2.0
具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%; margin:0;font-family:"微軟雅黑";}
#l-map{height:800px;width:100%;float:left;}
#r-result{width:20%;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yoursecret"></script>
<title>拾取地址的座標</title>
</head>
<body>
<div id="l-map"></div>
<div id="r-result"> 請輸入地址：
<br/>
<input type="text" id="txtKeyword" />
<br/>
<button onclick="searchAddr()">搜索</button>
</div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
map = new BMap.Map("l-map"); // 創建Map實例
map.centerAndZoom("{$address}", 12);
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 })); //右下角，打開
local = new BMap.LocalSearch(map, {
renderOptions: {map:map,autoViewport:true,selectFirstResult:false},
pageCapacity:10
});
myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0 - 10 * 25)
});
var keys = new Array("{$address}");
local.setSearchCompleteCallback(function (searchResults) {
console.log(searchResults);
if (typeof(searchResults) == "undefined" ) {
alert("百度API沒有搜索到該地址");
return;
}
if(searchResults.length>0) {
var searchResult = searchResults[0];
}else {
var searchResult = searchResults;
}
console.log(searchResult);
var contents = [];
for(var i=0; i<searchResult.getCurrentNumPois(); i++)
{
//獲得需要得到的座標
var poi = searchResult.getPoi(i);
if (!poi) {
alert("百度API沒有搜索到該地址");
}
// console.log(poi);
//設置中心點
map.centerAndZoom(poi.point, 13);
// 創建標註，爲要查詢的地方對應的經緯度
var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat),{ icon: myIcon });
//alert("["+poi.point.lng+","+poi.point.lat+"]");
//在地圖上添加標識
map.addOverlay(marker);
//點擊標識後顯示的內容
contents[i] = "你要查找的地方:【"+poi.title+"】<br/>地址："+poi.address+"<br/>經度："+poi.point.lng+"<br/>緯度："+poi.point.lat;
marker.setTitle(contents[i]);
//添加點擊事件監聽
marker.addEventListener("click", makerClick);
if (i==0) {
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + contents[0] + "</p>");
marker.openInfoWindow(infoWindow);
}
}
});
local.search(keys);
var makerClick = function() {
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + this.getTitle() + "</p>");
this.openInfoWindow(infoWindow);
}
function searchAddr() {
var keys = document.getElementById("txtKeyword").value;
local.search(keys);
}
</script>
具體查找出來的頁面如下，比如：搜索 安微黃山市黃山風景區，會出現如下的圖：
