百度API获取位置范围内的周边服务

百度地图API是一套为开发者免费提供的基于百度地图的应用程序接口,包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本,提供基本地图、位置搜索、周边搜索、...

[html] view plain copy
 
  1. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=(百度API key,可免费申请)"></script>  
  2. <style type="text/css">  
  3. body,html,#allmap {  
  4.      100%;  
  5.     height: 100%;  
  6.     overflow: hidden;  
  7.     margin: 0;  
  8. }  
  9.   
  10. #allmap {  
  11.     margin-top: 35px;  
  12. }  
  13.   
  14. #golist {  
  15.     display: none;  
  16. }  
  17.   
  18. @media ( max-device-width : 780px) {  
  19.     #golist {  
  20.         display: block !important;  
  21.     }  
  22. }  
  23. .tuijian_listbox1 {  
  24.     position: fixed;  
  25.     background: #fff;  
  26.     height: 35px;  
  27.     top: 0px;  
  28.     left: 0px;  
  29.      100%;  
  30. }  
  31.   
  32. ul.tuijian_list2 li {  
  33.      24%;  
  34.     height: 35px;  
  35.     float: left;  
  36.     text-align: center;  
  37.     line-height: 35px;  
  38. }  
  39. </style>  
  40. <body>  
  41.   
  42.     <div class="tuijian_listbox1">  
  43.         <ul class="tuijian_list2">  
  44.             <li val_class="景点">景点</li>  
  45.             <li val_class="住宿" style="border-left: solid 1px #e4e4e4;">住宿</li>  
  46.             <li val_class="农家乐" style="border-left: solid 1px #e4e4e4;">农家乐</li>  
  47.             <li val_class="小吃" style="border-left: solid 1px #e4e4e4;">特色小吃</li>  
  48.         </ul>  
  49.     </div>  
  50.     <div class="map" id="allmap"></div>  
  51. <script type="text/javascript">  
  52. var map;  
  53. var bounds;  
  54. var circle;  
  55. var local;  
  56. var lng='118.792255';  
  57. var lat='32.047475';//指定位置的经度纬度可以到百度定位拾取系统去拿 http://api.map.baidu.com/lbsapi/getpoint/index.html  
  58. var search= '景区';  
  59. var MyMarker;  
  60.     // 百度地图API功能  
  61. $(function(){  
  62.     map = new BMap.Map("allmap");  
  63.     GetLocation();    
  64.     var mPoint = new BMap.Point(lng,lat);  
  65.     var MyIcon = new BMap.Icon("标记箭头图标路径", new BMap.Size(18,28));  
  66.     MyMarker = new BMap.Marker(mPoint,{icon:MyIcon});  
  67.     map.enableScrollWheelZoom();  
  68.     map.centerAndZoom(mPoint,15);  
  69.     map.addOverlay(MyMarker);  
  70.       
  71.     map.addEventListener("click", function(e){  
  72.         map.removeOverlay(MyMarker);  
  73.         mPoint = new BMap.Point(e.point.lng,e.point.lat);  
  74.         MyMarker = new BMap.Marker(mPoint,{icon:MyIcon});  
  75.         map.addOverlay(MyMarker);  
  76.         Search(search,mPoint);  
  77.     });  
  78.       
  79.     $('.tuijian_list2 li').each(function(index) {  
  80.         $(this).click(function(){  
  81.             $(this).parents('.tuijian_list2').find('.tuijian_in').removeClass('tuijian_in');  
  82.             $(this).addClass("tuijian_in");  
  83.             search = $(this).attr('val_class');  
  84.             Search(search,mPoint);   
  85.         });  
  86.     });  
  87.     Search(search,mPoint);  
  88.      
  89. });   
  90.   
  91. /**  
  92.  * 得到圆的内接正方形bounds  
  93.  * @param {Point} centerPoi 圆形范围的圆心  
  94.  * @param {Number} r 圆形范围的半径  
  95.  * @return 无返回值     
  96.  */  
  97. function getSquareBounds(centerPoi,r){  
  98.    var a = Math.sqrt(2) * r; //正方形边长  
  99.    var mPoi = getMecator(centerPoi);  
  100.    var x0 = mPoi.x, y0 = mPoi.y;  
  101.    var x1 = x0 + a / 2 , y1 = y0 + a / 2;//东北点  
  102.    var x2 = x0 - a / 2 , y2 = y0 - a / 2;//西南点  
  103.    var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));  
  104.    return new BMap.Bounds(sw, ne);           
  105. };  
  106. //根据球面坐标获得平面坐标。  
  107. function getMecator(poi){  
  108.    return map.getMapType().getProjection().lngLatToPoint(poi);  
  109. };  
  110.     //根据平面坐标获得球面坐标。  
  111. function getPoi(mecator){  
  112.    return map.getMapType().getProjection().pointToLngLat(mecator);  
  113. };  
  114.   
  115. function Search(search,mPoint){  
  116.     map.clearOverlays();  
  117.     circle = new BMap.Circle(mPoint,1000,{stroke:"white",strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});  
  118.     map.addOverlay(circle);  
  119.     local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});  
  120.     bounds = getSquareBounds(circle.getCenter(),circle.getRadius());  
  121.     local.searchInBounds(search,bounds);  
  122.     map.addOverlay(MyMarker);  
  123.     /*  
  124.     map.centerAndZoom(mPoint, 16);  
  125.     var local = new BMap.LocalSearch(map, {  
  126.         renderOptions: {map: map, panel: "r-result"}  
  127.     });  
  128.     local.search(search);  
  129.     */  
  130. };  
  131.   
  132. function GetLocation(){  
  133.    var geolocation = new BMap.Geolocation();  
  134.    geolocation.getCurrentPosition(function(r){  
  135.        if(this.getStatus() == BMAP_STATUS_SUCCESS){  
  136.             lng = r.point.lng;  
  137.             lat = r.point.lat;  
  138.         }else{  
  139.             alert('failed'+this.getStatus());  
  140.         }          
  141.     },{enableHighAccuracy: true}  
  142.   );  
  143. };  
  144.       
  145.   
  146. </script>  
  147. </body>  
  148. </html> 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/telwanggs/p/6484732.html