利用百度地图api周边搜索功能，实现点击切换周边类型显示
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style>*{margin:0;padding:0;}ul,li{list-style-type:none;}a{text-decoration: none;}.mapleft{width:100%;margin-bottom:30px;}.mapleft li{margin-right:15px;float:left;}.mapleft li a{color:#fff;border-radius:5px;padding:5px 15px;background:#0070a1;}.mapleft li a:hover,.mapleft li.active a{background:#F69433;}</style></head><body><script type="text/javascript" src="https://api./api?v=2.0&ak=您的密钥"></script><script src="/jquery-3.1.1.min.js"></script><div style="width:768px;margin:30px auto;"><div class="mapleft"><ul><li class="active"><a href="javascript:;" data-key="学校">教育机构</a></li><li><a href="javascript:;" data-key="超市">商场超市</a></li><li><a href="javascript:;" data-key="医院">医疗机构</a></li><li><a href="javascript:;" data-key="公交">交通设施</a></li></ul><div style="clear:both;"></div></div><div style="width:768px;height:500px;" id="allmap"></div></div><script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap"); // 创建Map实例var mPoint = new BMap.Point(116.337788,39.754183);map.enableScrollWheelZoom();map.centerAndZoom(mPoint,15);//创建小狐狸var pt = new BMap.Point(116.337788,39.754183);var myIcon = new BMap.Icon("/address-icon.png", new BMap.Size(35,41));var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注marker2.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画map.addOverlay(marker2); // 将标注添加到地图中var circle = new BMap.Circle(mPoint,1000,{fillColor:"transparent", strokeColor:'transparent', strokeWeight: 0 ,fillOpacity: 0, strokeOpacity: 0});map.addOverlay(circle);$(function(){var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});local.searchNearby('学校',mPoint,1000);$(".mapleft a").click(function(){map.clearOverlays();//清除地图覆盖物var datakey = $(this).attr('data-key');$(this).parent().addClass('active').siblings().removeClass('active');var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});local.searchNearby(datakey,mPoint,1000);})})</script></body></html>
