利用百度地图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;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. 效果:
