百度地图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. [Repost] 悬线法

    <浅谈用极大化思想解决最大子矩形问题>作者:王知昆 首先,根据定理1:最大有效子矩形一定是一个极大子矩形.不过与前一种算法不同的是,我们不再要求每一次枚举的一定是极大子矩形而只要求所有的极 ...

  2. [STemWin教程入门篇]第二期：emWin5.xx的详细移植步骤

    转自:http://bbs.armfly.com/read.php?tid=1545 重要说明:(0)由于这个移植教程是去年过年的时候做的,用的是5.16,这就不再做个5.20的移植了,方法是一样的. ...

  3. (59)C# IIS Express 设置

    支持非localhost访问 本地测试时 修改 localhost改成127.0.0.1

  4. memcached 安装与简单实用使用

    一.简介 1.memcache与memcached的区别与联系: memcache是php的拓展,memcached是客户端,复杂的说:Memcache模块提供了于memcached方便的面向过程及面 ...

  5. LeetCode N皇后 & N皇后 II

    题目链接:https://leetcode-cn.com/problems/n-queens/ 题目链接:https://leetcode-cn.com/problems/n-queens-ii/ 题 ...

  6. upc组队赛14 Evolution Game【dp】

    Evolution Game 题目描述 In the fantasy world of ICPC there are magical beasts. As they grow, these beast ...

  7. 【Java多线程系列七】ExecutorService

    java.util.concurrent.ExecutorService接口提供了许多线程管理的方法 Method 说明 shutdown 拒绝接收新的任务,待已提交的任务执行后关闭,且宿主线程不阻塞 ...

  8. 力扣算法——136SingleNumber【E】

    Given a non-empty array of integers, every element appears twice except for one. Find that single on ...

  9. 在apache hadoop2.6 上部署hive 并将hive数据源存储于Mysql

    集成hive 的前提是apache hadoop 集群能够正常启动. hadoop 版本 apach2.6.0  hive 版本:1.2.1 1.安装mysql 并赋予权限: 1.1:创建hive 用 ...

  10. 使用Emacs来编程

    使用Emacs来编程 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #839496;} code ...