百度地图api-查询周边

2021-05-04 00:30

阅读:718

标签:教育   foo   .com   fill   区域   inf   info   stroke   src   

利用百度地图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
index = " + e.fromitem.index + "
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 += "
ToItem
index = " + e.toitem.index + "
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
index = " + e.item.index + "
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. 效果:

技术分享

百度地图api-查询周边

标签:教育   foo   .com   fill   区域   inf   info   stroke   src   

原文地址:http://www.cnblogs.com/l000/p/7728613.html


评论


亲,登录后才可以留言!