百度地图api-查询周边

Posted 2020-10-11 热爱世界的liang

利用百度地图api接口实现周边配套设施查询

1. 静态页面部分:

 1 　　　　　　　　　　　　　　<div class="row">
 2                             <aside class="profile-nav col-lg-3">
 3                                 <section class="panel">
 4                                     <ul xsts-tab class="nav nav-pills nav-stacked" id="panel">
 5                                         <li class="active" ng-click="baiduMapBack()"><a><i class="icon-location-arrow"></i>楼盘位置</a></li>
 6                                         <li ng-click="baiduMapSearch(\'公交\')"><a><i class="icon-truck"></i>交通设施</a></li>
 7                                         <li ng-click="baiduMapSearch(\'医院\')"><a><i class="icon-plus"></i>医疗机构</a></li>
 8                                         <li ng-click="baiduMapSearch(\'超市\')"><a><i class="icon-shopping-cart"></i>商场超市</a></li>
 9                                         <li ng-click="baiduMapSearch(\'学校\')"><a><i class="icon-smile"></i>教育机构</a></li>
10                                         <li ng-click="baiduMapSearch(\'餐厅\')"><a><i class="icon-food"></i>餐饮休闲</a></li>
11                                         <li ng-click="baiduMapSearch(\'公园\')"><a><i class="icon-leaf"></i>公园景点</a></li>
12                                     </ul>
13                                 </section>
14                             </aside>
15                             <aside class="profile-info col-lg-9 dictionaryMapContent">
16                                 <div id="dictionaryMap"></div>
17                                 <div id="r-result">
18                                     <input type="text" id="suggestId" class="form-control" placeholder="搜索您想要的位置">
19                                 </div>
20                                 <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
21                             </aside>
22                         </div>

2. js部分:

 1 　　　　　　　　　 // 初始配置
 2                 var map = new BMap.Map("dictionaryMap"), pointAll = ($scope.hdetail.coordinate).split(\',\'),
 3                     lat = parseFloat(pointAll[0]), lng = parseFloat(pointAll[1]), point = new BMap.Point(lat,lng);
 4                 map.centerAndZoom(point, 15);
 5                 // 添加控件
 6                 map.addControl(new BMap.NavigationControl());
 7                 // 范围区域
 8                 var circle = new BMap.Circle(point,1000,{fillColor:"#ccc", strokeWeight: 1 ,fillOpacity: 0.2, strokeOpacity: 0.2});
 9                 map.addOverlay(circle);
10                 var local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
11                 // 房源位置
12                 // var myIcon = new BMap.Icon("img/mappiont.png", new BMap.Size(30,37));
13                 // var marker = new BMap.Marker(point,{icon:myIcon});
14                 var marker = new BMap.Marker(point);
15                 map.addOverlay(marker);
16                 //  跳动标注
17                 marker.setAnimation(BMAP_ANIMATION_BOUNCE);
18                 $scope.baiduMapSearch = function(w){
19                     local.searchNearby(w,point,1000);
20                 };
21                 // 楼盘定位
22                 $scope.baiduMapBack = function(){
23                     map.reset();
24                     local.searchNearby(\'\',point,1000);
25                 };
26                 // 输入框搜索
27                 function G(id) {
28                     return document.getElementById(id);
29                 }
30                 var ac = new BMap.Autocomplete({"input":"suggestId","location":map});
31                 ac.addEventListener("onhighlight",function(e){
32                     var str = "";
33                     var _value = e.fromitem.value;
34                     var value = "";
35                     if (e.fromitem.index > -1) {
36                         value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
37                     }
38                     str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
39                     value = "";
40                     if (e.toitem.index > -1) {
41                         _value = e.toitem.value;
42                         value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
43                     }
44                     str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
45                     G("searchResultPanel").innerhtml = str;
46                 });
47                 var myValue;
48                 ac.addEventListener("onconfirm",function(e){
49                     var _value = e.item.value;
50                     myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
51                     G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
52                     setPlace();
53                 });
54                 function setPlace(){
55                     function myFun(){
56                         var pp = local.getResults().getPoi(0).point;
57                         map.centerAndZoom(pp, 18);
58                         map.addOverlay(new BMap.Marker(pp));
59                     }
60                     var local = new BMap.LocalSearch(map,{
61                         onSearchComplete: myFun
62                     });
63                     local.search(myValue);
64                 }

3. 效果: