百度地图搜索周边配套设施
来源：互联网 发布：vb declare function 编辑：程序博客网 时间：2024/06/10 05:21
我身边许多朋友都遇到同样的问题，拿到百度地图后，其功能都很分散，今天我把它的搜索功能整理了一下。不多说，直接上代码！（ps.记得带上你自己的百度地图AK。）
<!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"/> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your-ak"></script> <title>周边配套</title> <style type="text/css"> .nav-tabs{ border: none; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{ border: none; background-color: #39AC6A; color: #ffffff; } .nav-tabs > li.active a { color: #ffffff; background-color: #39AC6A; outline: none; } #myTabContent{ width:880px; height: 470px;margin-left: 2%; margin-top: 5px; } #allmap{ float:left; width: 605px; height: 100%; } .tab-panel{ float:right; width: 260px; height: 100%; overflow: scroll;display: none; } .tab-panel .active{ display: block; } #b-result, #e-result, #h-result, #k-result, #s-result, #t-result, #r-result, #o-result{ height: 90%; } </style></head><body><div style="width: 910px; height: 580px; border: 1px solid #F5F5F5; box-shadow: 5px 5px 3px #d5d5d5; margin: 0 auto;"> <div> <div style="margin-left: 2%"> <h4>周边配套</h4> <div class="navbar-collapse collapse"> <ul id="myTab" class="nav navbar-nav nav-tabs"> <li class="active"><a href="#bus" onclick="busSearch()" data-toggle="tab">公交/地铁</a></li> <li><a href="#edu" onclick="schoolSearch()" data-toggle="tab">教育设施</a></li> <li><a href="#hos" onclick="hospitalSearch()" data-toggle="tab">医院</a></li> <li><a href="#bank" onclick="bankSearch()" data-toggle="tab">银行</a></li> <li><a href="#ktv" onclick="ktvSearch()" data-toggle="tab">休闲娱乐</a></li> <li><a href="#shop" onclick="shopSearch()" data-toggle="tab">购物</a></li> <li><a href="#rep" onclick="repastSearch()" data-toggle="tab">餐饮</a></li> <li><a href="#sport" onclick="sportSearch()" data-toggle="tab">运动健身</a></li> </ul> </div> </div> <div id="myTabContent" class="tab-content"> <div id="allmap"></div> <!--bus--> <div class="tab-panel fade active in" id="bus"> <div id="b-result"></div> </div> <!--education--> <div class="tab-panel fade in" id="edu"> <div id="e-result"></div> </div> <!--hospital--> <div class="tab-panel fade in" id="hos"> <div id="h-result"></div> </div> <!--bank--> <div class="tab-panel fade in" id="bank"> <div id="k-result"></div> </div> <!--shopping--> <div class="tab-panel fade in" id="shop"> <div id="s-result"></div> </div> <!--ktv--> <div class="tab-panel fade in" id="ktv"> <div id="t-result"></div> </div> <!--repast--> <div class="tab-panel fade in" id="rep"> <div id="r-result"></div> </div> <!--sport--> <div class="tab-panel fade in" id="sport"> <div id="o-result"></div> </div> </div> </div></div><script> $(function () { $('#myTab li:eq(0) a').tab('show'); });</script><!----><!--<div id="r-result"></div>--></body></html><script type="text/javascript"> //公交车站查询 function busSearch(){ var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.enableScrollWheelZoom(); map.centerAndZoom(point, 15); //添加地图缩放控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_RIGHT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, // 启用显示定位 enableGeolocation: true }); map.addControl(navigationControl); var transit = new BMap.TransitRoute(map, { renderOptions: {map: map, panel: "b-result"} }); transit.search("王府井", "西单"); } setTimeout(function () { busSearch(); }, 1000); //圆形区域搜索关键字：学校 function schoolSearch(){ var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.enableScrollWheelZoom(); map.centerAndZoom(point, 15); //添加地图缩放控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_RIGHT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, // 启用显示定位 enableGeolocation: true }); map.addControl(navigationControl); var circle = new BMap.Circle(point,1200,{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('学校',point,1200); var school = new BMap.LocalSearch(map, { renderOptions:{map: map, panel:"e-result"}, pageCapacity:5 }); school.searchInBounds('学校', map.getBounds()); } //圆形区域搜索关键字：医院 function hospitalSearch(){ var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.enableScrollWheelZoom(); map.centerAndZoom(point, 15); //添加地图缩放控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_RIGHT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, // 启用显示定位 enableGeolocation: true }); map.addControl(navigationControl); var circle = new BMap.Circle(point,1300,{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('医院',point,1300); var local = new BMap.LocalSearch(map, { renderOptions:{map: map, panel:"h-result"}, pageCapacity:5 }); local.searchInBounds('医院', map.getBounds()); } //圆形区域搜索关键字：银行 function bankSearch(){ var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.enableScrollWheelZoom(); map.centerAndZoom(point, 15); //添加地图缩放控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_RIGHT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, // 启用显示定位 enableGeolocation: true }); map.addControl(navigationControl); var circle = new BMap.Circle(point,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('银行',point,1000); var local = new BMap.LocalSearch(map, { renderOptions:{map: map, panel:"k-result"}, pageCapacity:5 }); local.searchInBounds('银行', map.getBounds()); } //多关键字查询：茶楼、KTV、电影院(休闲娱乐) function ktvSearch(){ var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.enableScrollWheelZoom(); map.centerAndZoom(point, 15); //添加地图缩放控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_RIGHT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, // 启用显示定位 enableGeolocation: true }); map.addControl(navigationControl); var myKeys = ['茶楼','KTV','电影院']; var local = new BMap.LocalSearch(map, { renderOptions:{map: map, panel:"t-result"}, pageCapacity:5 }); local.searchInBounds(myKeys, map.getBounds()); } //多关键字查询：酒店、餐馆(餐饮) function repastSearch(){ var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.enableScrollWheelZoom(); map.centerAndZoom(point, 15); //添加地图缩放控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_RIGHT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, // 启用显示定位 enableGeolocation: true }); map.addControl(navigationControl); var myKeys = ['酒店','餐馆']; var local = new BMap.LocalSearch(map, { renderOptions:{map: map, panel:"r-result"}, pageCapacity:5 }); local.searchInBounds(myKeys, map.getBounds()); } //多关键字查询：商场、超市(购物) function shopSearch(){ var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.enableScrollWheelZoom(); map.centerAndZoom(point, 15); //添加地图缩放控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_RIGHT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, // 启用显示定位 enableGeolocation: true }); map.addControl(navigationControl); var myKeys = ['商场','超市']; var local = new BMap.LocalSearch(map, { renderOptions:{map: map, panel:"s-result"}, pageCapacity:5 }); local.searchInBounds(myKeys, map.getBounds()); } //多关键字查询：健身房、球馆(运动、健身) function sportSearch(){ var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.enableScrollWheelZoom(); map.centerAndZoom(point, 15); //添加地图缩放控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_RIGHT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, // 启用显示定位 enableGeolocation: true }); map.addControl(navigationControl); var myKeys = ['健身房','球馆']; var local = new BMap.LocalSearch(map, { renderOptions:{map: map, panel:"o-result"}, pageCapacity:5 }); local.searchInBounds(myKeys, map.getBounds()); }</script> 0 0
- 百度地图搜索周边配套设施
- 产品设计原则之六--完善产品的周边服务和配套设施
- 百度地图搜索
- 苹果自带高德地图搜索周边功能
- 百度地图搜索关键字总集
- 百度地图搜索经纬度代码
- 百度地图搜索（二）
- 百度地图搜索（三）
- 223.map5-百度地图搜索
- 百度地图搜索位置
- 百度地图搜索、标注地图示例
- 百度地图搜索页面（一）
- 地图搜索
- 地图搜索
- 百度地图搜索附近的地方ipa接口
- Python爬虫 百度地图搜索数据采集
- 百度地图的周边搜索
- 百度地图获取周边位置
- CC2430的串口的位置1或2选择问题
- 《剑指Offer》阅读后记
- 采用左孩子右兄弟结构实现森林
- 菜鸟学Java----Java面向对象
- 关于RECT结构体
- 百度地图搜索周边配套设施
- 【Symfony】 Doctrine Entity 常用类型以及属性
- DSP里动态内存分配malloc函数的使用
- OpenGL ES雾
- 用instancetype代替id作返回类型有什么好处
- 浏览器兼容处理
- iOS 学习日志:infoplist常用设置
- Gorgeous Sequence
- Ubuntu远程连接报错：xrdp_mm_process_login_response: login failed
