百度地图api-查询周边
2021-05-04 00:30
标签:教育 foo .com fill 区域 inf info stroke src 利用百度地图api接口实现周边配套设施查询 1. 静态页面部分: 2. js部分: 3. 效果: 百度地图api-查询周边 标签:教育 foo .com fill 区域 inf info stroke src 原文地址:http://www.cnblogs.com/l000/p/7728613.html 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>
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 }