百度地图 周边搜索poi及 配置参数,通过返回参数的tags，分类显示

// 百度地图官方编辑器
http://lbsyun.baidu.com/jsdemo.htm#i1_6

<style type="text/css">
	body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
	#l-map{
	height:100%;
	width:100%;
	}
	#r-result{
   		position: fixed;
        background-color: white;
        max-height: 50%;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        width: 50%;
        border-bottom: solid 1px silver;}

</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>本地搜索的结果面板</title>

<div id="l-map"></div>
<div id="r-result"></div>

< script type=“text/javascript”>
// 百度地图API功能
var opa = 110.279623;
var opb = 25.269804;
var map = new BMap.Map(“l-map”); // 创建Map实例
map.centerAndZoom(new BMap.Point(opa,opb), 11);
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: “r-result”}
});

var opN = ‘餐饮’;
local.search(opN);
< /script>

// 绘制 圆形区域搜索 ，但是，没有poi列表
< style type=“text/css”>
body, html {width: 100%;height: 100%;margin:0;font-family:“微软雅黑”;}
#allmap{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
< /style>
< script type=“text/javascript” src="//api.map.baidu.com/api?v=2.0&ak=您的密钥">

<  id="allmap"></div>

< script type=“text/javascript”>
// 百度地图API功能
var opa = 110.279623;
var opb = 25.269804;
var map = new BMap.Map(“allmap”); // 创建Map实例
var mPoint = new BMap.Point(opa, opb);
map.enableScrollWheelZoom();
map.centerAndZoom(mPoint,15);
var circle = new BMap.Circle(mPoint,1000,{fillColor:“blue”, strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
map.addOverlay(circle);
var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
local.searchNearby(‘餐馆’,mPoint,1000);
< /script>

http://lbs.baidu.com/jsdemo.htm#i3_2
可划定范围，并 显示检索结果

< script type=“text/javascript” src=“http://api.map.baidu.com/api?v=1.2”>< /script>
< input type=“button” οnclick=“displayPOI();” value=“确定” />
< div style=“width:600px;height:340px;border:1px solid gray;float:left;” id=“container”>< /div>
< div style=“width:300px;height:340px;border:1px solid gray;border-left:0;float:left;” id=“panel”>< /div>
< script type=“text/javascript”>
var map = new BMap.Map(“container”);
var mPoint = new BMap.Point(116.404, 39.915);
map.centerAndZoom(mPoint, 16);
map.enableScrollWheelZoom(); //启用滚轮缩放
var mOption = {
poiRadius : 500, //半径为1000米内的POI,默认100米
numPois : 12 //列举出50个POI,默认10个
}
var myGeo = new BMap.Geocoder(); //创建地址解析实例
function displayPOI(){
map.addOverlay(new BMap.Circle(mPoint,500)); //添加一个圆形覆盖物
myGeo.getLocation(mPoint,
function mCallback(rs) {
console.log(rs)
var allPois = rs.surroundingPois; //获取全部POI（该点半径为100米内有6个POI点）
for(i=0;i<allPois.length;++i){
document.getElementById(“panel”).innerHTML += “

” + (i+1) + “、” + allPois[i].title + “,地址:” + allPois[i].address + “

”;
map.addOverlay(new BMap.Marker(allPois[i].point));
}
},mOption
);
}
//surroundingPois.tags,后期可以考虑用 这个字段再分类；
//https://www.cnblogs.com/milkmap/archive/2011/09/16/2178907.html
< /script>