1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>地图 - 老干部管理信息系统</title>
  6. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
  7. <style type="text/css">
  8. body{font-size:14px;}
  9. h5{line-height:3em;padding:;margin:;}
  10.  
  11. .txt{border:1px solid #ccc;background:none;padding:1px; width:400px;}
  12. .f-l{float:left;}
  13. .t-c{text-align:center;}
  14. .clear{clear:both;}
  15. .hidden{display:none;}
  16. .searchbox{border:4px solid #e5ecf9;height:40px;float:left;line-height:40px;padding: 20px;margin: 50px;}
  17. .mainbox{margin:20px ;}
  18. .boxmap{width:700px;height:500px;border:1px solid gray;float:left;}
  19. .boxpanel{width:250px;float:left;margin: 10px;border:1px solid gray;padding: 10px 10px;}
  20. #startPanel,#endPanel{border:1px solid #FA8722;font-size:12px;}
  21. #startPanel div,#endPanel div{padding:5px;}
  22. #startPanel p,#endPanel p{margin:;padding:;line-height:.2em;}
  23. #drivingPanel{border:1px solid #6688EE;}
  24. </style>
  25.  
  26. </head>
  27. <body>
  28. <div>
  29. <!-- <img class="f-l" src="pictures/book.png" width="50px" height="50px" alt="老干部管理信息系统"/> -->
  30. <div class="searchbox">
  31. 位置:<input class="txt" type="text" value="天安门" id="searchPlace" />&nbsp;&nbsp;
  32. 周边:<select
  33. id="aroundType">
  34. <option>医院</option>
  35. <option>学校</option>
  36. <option>超市</option>
  37. <option>银行</option>
  38. </select>
  39. <input type="button" value="搜索" id="btnSearch" onclick="doSearchPlace()" />
  40. </div>
  41.  
  42. </div>
  43. <div class="clear"></div>
  44. <div class="mainbox">
  45. <div class="boxmap" id="container"></div>
  46. <div id="results" style="font-size:13px;margin-top:10px;"></div>
  47. <div id="hospitalresults" style="font-size:13px;margin-top:10px;"></div>
  48.  
  49. </div>
  50.  
  51. </body>
  52. </html>
  53. <script type="text/javascript">
  54. var map = new BMap.Map("container"); // 创建Map实例
  55. var point = new BMap.Point(116.404, 39.915); // 创建点坐标
  56. map.centerAndZoom(point, ); // 初始化地图,设置中心点坐标和地图级别。
  57. map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
  58. map.enableKeyboard(); // 启用键盘操作。
  59. map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
  60. map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
  61. map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
  62.  
  63. var searchresult;
  64. var local = new BMap.LocalSearch(map, {
  65. renderOptions: {
  66. map: map,
  67. panel: "results"
  68. },
  69. onSearchComplete: function (results) {
  70. // 判断状态是否正确
  71. if (local.getStatus() == BMAP_STATUS_SUCCESS) searchresult = results;
  72. else searchresult = null;
  73. }
  74. });
  75. var searchresult2;
  76. var local2 = new BMap.LocalSearch(map, {
  77. renderOptions:
  78. {
  79. map: map,
  80. panel: "hospitalresults"
  81. },
  82. onSearchComplete: function (results) {
  83. // 判断状态是否正确
  84. if (local.getStatus() == BMAP_STATUS_SUCCESS) searchresult2 = results;
  85. else searchresult2 = null;
  86. }
  87. });
  88. function doSearchPlace() {
  89. if (local.getResults() != null)
  90. local.clearResults();
  91. if (local2.getResults() != null)
  92. local2.clearResults();
  93. map.clearOverlays();
  94. var destination = document.getElementById("searchPlace").value;
  95. local.search(destination);
  96. local.setResultsHtmlSetCallback(function () {//加载完结果面板后调用
  97. if (searchresult == null) return false;
  98. var controls = document.getElementsByTagName("li");
  99. for (var i = ; i < controls.length; i++) {
  100. var spans = controls[i].getElementsByTagName("span");
  101. var arr = new Array();
  102. var p = searchresult.getPoi(i);
  103. if (p == null) continue;
  104. arr[] = searchresult.getPoi(i).point.lng;
  105. arr[] = searchresult.getPoi(i).point.lat;
  106. spans[].onclick = function () {
  107. map.clearOverlays();
  108.  
  109. point.lng = arr[];
  110. point.lat = arr[];
  111.  
  112. var circle = new BMap.Circle(point, , { strokeWeight: , fillOpacity: 0.5 });
  113. map.addOverlay(circle);
  114.  
  115. var around = document.getElementById("aroundType");
  116. var bounds = getSquareBounds(circle.getCenter(), circle.getRadius());
  117. local2.searchInBounds(around[around.selectedIndex].text, bounds);
  118. };
  119. }
  120. });
  121. }
  122. /**
  123. * 得到圆的内接正方形bounds
  124. * @param {Point} centerPoi 圆形范围的圆心
  125. * @param {Number} r 圆形范围的半径
  126. * @return 无返回值
  127. */
  128. function getSquareBounds(centerPoi, r) {
  129. var a = Math.sqrt() * r; //正方形边长
  130.  
  131. mPoi = getMecator(centerPoi);
  132. var x0 = mPoi.x, y0 = mPoi.y;
  133.  
  134. var x1 = x0 + a / , y1 = y0 + a / ; //东北点
  135. var x2 = x0 - a / , y2 = y0 - a / ; //西南点
  136.  
  137. var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));
  138. return new BMap.Bounds(sw, ne);
  139.  
  140. }
  141. //根据球面坐标获得平面坐标。
  142. function getMecator(poi) {
  143. return map.getMapType().getProjection().lngLatToPoint(poi);
  144. }
  145. //根据平面坐标获得球面坐标。
  146. function getPoi(mecator) {
  147. return map.getMapType().getProjection().pointToLngLat(mecator);
  148. }
  149.  
  150. </script>

百度地图API的调用的更多相关文章

  1. vue中百度地图API的调用

    1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...

  2. 如何在网页中调用百度地图api

    我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...

  3. 在XAF(ASP.NET)中以ListEditor的形式调用百度地图API

    因为项目需要,在系统中使用地图显示设备的地理位置.考虑过ArgGIS,Bing和Baidu地图.本来想用ArgGIS,看教程嫌麻烦.所以还是用Web地图吧.Bing的话还要申请个key,没心情.百度地 ...

  4. 调用百度地图Api实现的查看地图功能的小插件

    1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...

  5. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

  6. 【c#】Form调用百度地图api攻略及常见问题

    首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...

  7. 【百度地图API】当地址解析失败时,如何调用search方法查找地址

    原文:[百度地图API]当地址解析失败时,如何调用search方法查找地址 有个朋友问我,当地址解析失败时,应该如何处理呢?比如,他想搜索“南宁市青秀区”. --------------------- ...

  8. HTML 百度地图API调用示例源码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    <!DOCTYPE html> <html lang="zh-cmn-Hans">     <meta charset="UTF-8&quo ...

随机推荐

  1. Beaglebone Back学习三(开发环境搭建)

    开发环境搭建 1 Ubuntu环境搭建 2 Window环境搭建 3 开发板环境搭建 1 Ubuntu环境搭建 (1)安装必要的网络工具 samba nfs tftp vmware-tools sam ...

  2. 快速编译Delphi XE3 项目工程组

    Embarcadero 做了个好事.工程组可以直接使用 MSBuild 进行编译,让发布更简单.在Bin目录中 rsvars.bat 用于设置编译的环境变量,结合使用就可以顺利进行编译. call r ...

  3. EXTJS 3.0 资料 控件之 itemselector 用法

    var dsform = new Ext.data.ArrayStore({ data: [[123, 'One Hundred Twenty Three'], ['1', '今天星期一'], ['2 ...

  4. Truncating HTML attribute value in SharePoint DataFormWebPart

    <xsl:value-ofdisable-output-escaping="yes"select="@Body"/>

  5. python学习笔记19(序列的方法)

    序列包含有宝值 表(tuple)和表(list).此外,字符串(string)是一种特殊的定值表,表的元素可以更改,定值表一旦建立,其元素不可更改. 任何的序列都可以引用其中的元素(item). 下面 ...

  6. CoInitialize()、CoInitializeEx()和AfxOleInit()区别联系

    CoInitialize()和AfxOleInit() 都是初始化COM库,不同之处在与: OLE是建立在COM之上的技术,层次比COM要高.AfxOleInit()调用的是OleInitialize ...

  7. 2336: [HNOI2011]任务调度 - BZOJ

    一道随机算法的题目 随便用什么随机算法 首先我们可以想到枚举类型3的最终类型,然后再做 先贪心出一个较优的序列,首先我们知道肯定是在A机器上先做完类型1的事件再做类型2的事件,机器B也类似,因为这些没 ...

  8. 你不需要jQuery(四)

    jQuery是个好东西.它诞生于IE6在互联网称霸的那个时代.jQuery的存在让我们的代码能很好的兼容各种平台. 然而,到如今,浏览器技术已经取得了巨大的进步.我们可以自由的使用所有最新众多ES5/ ...

  9. 使用Flexbox实现CSS竖向居中

    竖向居中需要一个父元素和一个子元素合作完成. <div class="flexbox-container"> <div>Blah blah</div& ...

  10. Nginx 禁止访问某个目录或文件的设置方法

    如果基于WEB根目录下,要禁止用户访问/config目录,或者要禁止用户访问/config.ini(ZF常用INI,不过建议还是放到WEB目录以外的地方),可以通过location进行配置,返回403 ...