应用场景:获取指定位置周边的所有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>