應用場景:獲取指定位置周邊的所有POI,如小區、餐館、道路、酒店等,用於讓用戶選擇。
直接上代碼
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(101.76792099,36.64073861);
map.centerAndZoom(point,16);
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角,添加默認縮放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角,僅包含平移和縮放按鈕
/*縮放控件type有四種類型:
BMAP_NAVIGATION_CONTROL_SMALL:僅包含平移和縮放按鈕;BMAP_NAVIGATION_CONTROL_PAN:僅包含平移按鈕;BMAP_NAVIGATION_CONTROL_ZOOM:僅包含縮放按鈕*/
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
map.enableScrollWheelZoom(true);
// 定義一個控件類,即function
function ZoomControl(){
// 默認停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(map.width/2, map.height/2);
}
// 通過JavaScript的prototype屬性繼承於BMap.Control
ZoomControl.prototype = new BMap.Control();
// 自定義控件必須實現自己的initialize方法,並且將控件的DOM元素返回
// 在本方法中創建個div元素作爲控件的容器,並將其添加到地圖容器中
ZoomControl.prototype.initialize = function(map){
// 創建一個DOM元素
var div = document.createElement("div");
// 添加文字說明
div.appendChild(document.createTextNode("中"));
// 設置樣式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "red";
// 綁定事件,點擊一次放大兩級
div.onclick = function(e){
map.setZoom(map.getZoom() + 2);
}
// 添加DOM元素到地圖中
map.getContainer().appendChild(div);
// 將DOM元素返回
return div;
}
// 創建控件
var myZoomCtrl = new ZoomControl();
// 添加到地圖當中
map.addControl(myZoomCtrl);
function showInfo(e){
var p = map.getCenter();
var mOption = {
poiRadius :1000, //半徑爲1000米內的POI,默認100米
numPois : 20 //列舉出50個POI,默認10個
}
var myGeo = new BMap.Geocoder(); //創建地址解析實例
myGeo.getLocation(p,
function mCallback(rs){
var allPois = rs.surroundingPois; //獲取全部POI(該點半徑爲100米內有6個POI點)
document.getElementById("panel").innerHTML='';
for(i=0;i<allPois.length;++i){
document.getElementById("panel").innerHTML += "<p style='font-size:12px;'>" + (i+1) + "、" + allPois[i].title + "<br>地址:" + allPois[i].address + "</p>";
//map.addOverlay(new BMap.Marker(allPois[i].point));
}
},mOption
);
}
map.addEventListener("dragend", showInfo);
</script>