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

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

百度API获取位置范围内的周边服务的更多相关文章

  1. Python 读取照片的信息：拍摄时间、拍摄设备、经纬度等，以及根据经纬度通过百度地图API获取位置

    通过第三方库exifread读取照片信息.exifread官网:https://pypi.org/project/ExifRead/ 一.安装exifreadpip install exifread ...

  2. 【转】百度API获取城市名地名(附源码)

    在做一个软件时,用到了定位功能.网上有很多关于google 的GPS定位,但网上关于google定位都没有用, 搜索下原因:(这里建议大家在中国就尽量不使用系统自带的定位) 因为Google的服务器不 ...

  3. html5获取经纬度，百度api获取街区名，并使用JS保存进cookie

    引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...

  4. java工具类(一)之服务端java实现根据地址从百度API获取经纬度

    服务端java实现根据地址从百度API获取经纬度 代码: package com.pb.baiduapi; import java.io.BufferedReader; import java.io. ...

  5. 【前端】html5获取经纬度，百度api获取街区名，并使用JS保存进cookie

    引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...

  6. Vue 通过调用百度API获取地理位置-经度纬度省份城市

    一.首先在百度api注册获得ak密钥 二.新建js文件,我命名为loadBMap.js,里面创建script,代码如下: /** * 加载地图 * @param {Function} callback ...

  7. 百度API获取经纬度使用

    首先通过百度地图,注册账号,然后申请密钥 http://lbsyun.baidu.com/apiconsole/key 搜索某个关键字 http://api.map.baidu.com/place/v ...

  8. 爬虫——python——百度地图经纬度查询——经纬度查看地点地名——利用百度API获取地名经纬度——爬取所有的中国地址

    import requests address = '40.8587960,86.866991' url = 'http://api.map.baidu.com/geocoder?output=jso ...

  9. 通过百度api 获取当前城市3种方法

    方法一:function showLocation(data) { console.log(data.content); //alert(data.content.address_detail.cit ...

随机推荐

  1. Git GUI使用方法【转】

    前言 之前一直想一篇这样的东西,因为最初接触时,我也认真看了廖雪峰的教程,但是似乎我觉得讲得有点多,而且还是会给我带来很多多余且重复的操作负担,所以我希望能压缩一下它在我工作中的成本,但是搜索了一下并 ...

  2. [CSP-S模拟测试]:F（DP+线段树）

    题目传送门(内部题49) 输入格式 第一行四个整数$n,q,a,b$.接下来$n$行每行一个整数$p_i$. 输出格式 一行一个整数表示答案. 样例 样例输入: 10 3 3 7 样例输出: 数据范围 ...

  3. JS基础入门篇（二十四）—DOM（上）

    1.常用的节点类型,nodeType,attributes,childNodes. 1.元素节点 - 1 2.属性节点 - 2 3.文本节点 - 3 4.注释节点 - 8 5.文档节点 - 9 查看节 ...

  4. SAS 读取数据文件

    每次读取数据时需要告诉SAS3件事:1:数据存在哪里?2:数据的形式3:创建的数据集的类型(永久/临时) 1 读取SAS数据集 DATA temp; /*temp 为创建的数据集名称*/ INFILE ...

  5. 三种做法：BZOJ 2780: [Spoj]8093 Sevenk Love Oimaster

    目录 题意 思路 AC_Code1 AC_Code2 AC_Code3 参考 @(bzoj 2780: [Spoj]8093 Sevenk Love Oimaster) 题意 链接:here 有\(n ...

  6. 关于audio不能拖放

    图一,图二均为wav格式文件 图一为播放本地的音频,可以拖放 图二为放在后台的音频,不可以拖放 把这两个图片发给后台,让后台分析下两个的headers不同之处

  7. 4.Grafana展示监控数据

    Grafana是什么?我们知道Node_export监控服务器状态,但是没有具体的展示,简单来说,Grafana的主要作用就是对监控的数据进行图形化展示. docker部署 grafana我们这里采用 ...

  8. 2019浙江省赛 Strings in the Pocket【manacher】

    Strings in the Pocket 题目链接 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=6012 题意 给你两个字符 ...

  9. GNU Linux 64汇编学习

    函数调用传参: 第一个参数:rdi, 第二个参数:rsi 函数调用栈结构: 返回值 第一个参数 第二个参数 +----------+ rsp-24 | a | +----------+ rsp-16 ...

  10. mysqldump备份和恢复

    一.备份单个数据库 1.备份命令:mysqldump MySQL数据库自带的一个很好用的备份命令.是逻辑备份,导出 的是SQL语句.也就是把数据从MySQL库中以逻辑的SQL语句的形式直接输出或生成备 ...