百度地图API的调用
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>地图 - 老干部管理信息系统</title>
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
- <style type="text/css">
- body{font-size:14px;}
- h5{line-height:3em;padding:;margin:;}
- .txt{border:1px solid #ccc;background:none;padding:1px; width:400px;}
- .f-l{float:left;}
- .t-c{text-align:center;}
- .clear{clear:both;}
- .hidden{display:none;}
- .searchbox{border:4px solid #e5ecf9;height:40px;float:left;line-height:40px;padding: 20px;margin: 50px;}
- .mainbox{margin:20px ;}
- .boxmap{width:700px;height:500px;border:1px solid gray;float:left;}
- .boxpanel{width:250px;float:left;margin: 10px;border:1px solid gray;padding: 10px 10px;}
- #startPanel,#endPanel{border:1px solid #FA8722;font-size:12px;}
- #startPanel div,#endPanel div{padding:5px;}
- #startPanel p,#endPanel p{margin:;padding:;line-height:.2em;}
- #drivingPanel{border:1px solid #6688EE;}
- </style>
- </head>
- <body>
- <div>
- <!-- <img class="f-l" src="pictures/book.png" width="50px" height="50px" alt="老干部管理信息系统"/> -->
- <div class="searchbox">
- 位置:<input class="txt" type="text" value="天安门" id="searchPlace" />
- 周边:<select
- id="aroundType">
- <option>医院</option>
- <option>学校</option>
- <option>超市</option>
- <option>银行</option>
- </select>
- <input type="button" value="搜索" id="btnSearch" onclick="doSearchPlace()" />
- </div>
- </div>
- <div class="clear"></div>
- <div class="mainbox">
- <div class="boxmap" id="container"></div>
- <div id="results" style="font-size:13px;margin-top:10px;"></div>
- <div id="hospitalresults" style="font-size:13px;margin-top:10px;"></div>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- var map = new BMap.Map("container"); // 创建Map实例
- var point = new BMap.Point(116.404, 39.915); // 创建点坐标
- map.centerAndZoom(point, ); // 初始化地图,设置中心点坐标和地图级别。
- map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
- map.enableKeyboard(); // 启用键盘操作。
- map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
- map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
- map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
- var searchresult;
- var local = new BMap.LocalSearch(map, {
- renderOptions: {
- map: map,
- panel: "results"
- },
- onSearchComplete: function (results) {
- // 判断状态是否正确
- if (local.getStatus() == BMAP_STATUS_SUCCESS) searchresult = results;
- else searchresult = null;
- }
- });
- var searchresult2;
- var local2 = new BMap.LocalSearch(map, {
- renderOptions:
- {
- map: map,
- panel: "hospitalresults"
- },
- onSearchComplete: function (results) {
- // 判断状态是否正确
- if (local.getStatus() == BMAP_STATUS_SUCCESS) searchresult2 = results;
- else searchresult2 = null;
- }
- });
- function doSearchPlace() {
- if (local.getResults() != null)
- local.clearResults();
- if (local2.getResults() != null)
- local2.clearResults();
- map.clearOverlays();
- var destination = document.getElementById("searchPlace").value;
- local.search(destination);
- local.setResultsHtmlSetCallback(function () {//加载完结果面板后调用
- if (searchresult == null) return false;
- var controls = document.getElementsByTagName("li");
- for (var i = ; i < controls.length; i++) {
- var spans = controls[i].getElementsByTagName("span");
- var arr = new Array();
- var p = searchresult.getPoi(i);
- if (p == null) continue;
- arr[] = searchresult.getPoi(i).point.lng;
- arr[] = searchresult.getPoi(i).point.lat;
- spans[].onclick = function () {
- map.clearOverlays();
- point.lng = arr[];
- point.lat = arr[];
- var circle = new BMap.Circle(point, , { strokeWeight: , fillOpacity: 0.5 });
- map.addOverlay(circle);
- var around = document.getElementById("aroundType");
- var bounds = getSquareBounds(circle.getCenter(), circle.getRadius());
- local2.searchInBounds(around[around.selectedIndex].text, bounds);
- };
- }
- });
- }
- /**
- * 得到圆的内接正方形bounds
- * @param {Point} centerPoi 圆形范围的圆心
- * @param {Number} r 圆形范围的半径
- * @return 无返回值
- */
- function getSquareBounds(centerPoi, r) {
- var a = Math.sqrt() * r; //正方形边长
- mPoi = getMecator(centerPoi);
- var x0 = mPoi.x, y0 = mPoi.y;
- var x1 = x0 + a / , y1 = y0 + a / ; //东北点
- var x2 = x0 - a / , y2 = y0 - a / ; //西南点
- var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));
- return new BMap.Bounds(sw, ne);
- }
- //根据球面坐标获得平面坐标。
- function getMecator(poi) {
- return map.getMapType().getProjection().lngLatToPoint(poi);
- }
- //根据平面坐标获得球面坐标。
- function getPoi(mecator) {
- return map.getMapType().getProjection().pointToLngLat(mecator);
- }
- </script>
百度地图API的调用的更多相关文章
- vue中百度地图API的调用
1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...
- 如何在网页中调用百度地图api
我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...
- 在XAF(ASP.NET)中以ListEditor的形式调用百度地图API
因为项目需要,在系统中使用地图显示设备的地理位置.考虑过ArgGIS,Bing和Baidu地图.本来想用ArgGIS,看教程嫌麻烦.所以还是用Web地图吧.Bing的话还要申请个key,没心情.百度地 ...
- 调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
- 百度地图API调用实例之地址标注与位置显示
之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...
- 【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
- 【百度地图API】当地址解析失败时,如何调用search方法查找地址
原文:[百度地图API]当地址解析失败时,如何调用search方法查找地址 有个朋友问我,当地址解析失败时,应该如何处理呢?比如,他想搜索“南宁市青秀区”. --------------------- ...
- HTML 百度地图API调用示例源码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...
随机推荐
- Beaglebone Back学习三(开发环境搭建)
开发环境搭建 1 Ubuntu环境搭建 2 Window环境搭建 3 开发板环境搭建 1 Ubuntu环境搭建 (1)安装必要的网络工具 samba nfs tftp vmware-tools sam ...
- 快速编译Delphi XE3 项目工程组
Embarcadero 做了个好事.工程组可以直接使用 MSBuild 进行编译,让发布更简单.在Bin目录中 rsvars.bat 用于设置编译的环境变量,结合使用就可以顺利进行编译. call r ...
- EXTJS 3.0 资料 控件之 itemselector 用法
var dsform = new Ext.data.ArrayStore({ data: [[123, 'One Hundred Twenty Three'], ['1', '今天星期一'], ['2 ...
- Truncating HTML attribute value in SharePoint DataFormWebPart
<xsl:value-ofdisable-output-escaping="yes"select="@Body"/>
- python学习笔记19(序列的方法)
序列包含有宝值 表(tuple)和表(list).此外,字符串(string)是一种特殊的定值表,表的元素可以更改,定值表一旦建立,其元素不可更改. 任何的序列都可以引用其中的元素(item). 下面 ...
- CoInitialize()、CoInitializeEx()和AfxOleInit()区别联系
CoInitialize()和AfxOleInit() 都是初始化COM库,不同之处在与: OLE是建立在COM之上的技术,层次比COM要高.AfxOleInit()调用的是OleInitialize ...
- 2336: [HNOI2011]任务调度 - BZOJ
一道随机算法的题目 随便用什么随机算法 首先我们可以想到枚举类型3的最终类型,然后再做 先贪心出一个较优的序列,首先我们知道肯定是在A机器上先做完类型1的事件再做类型2的事件,机器B也类似,因为这些没 ...
- 你不需要jQuery(四)
jQuery是个好东西.它诞生于IE6在互联网称霸的那个时代.jQuery的存在让我们的代码能很好的兼容各种平台. 然而,到如今,浏览器技术已经取得了巨大的进步.我们可以自由的使用所有最新众多ES5/ ...
- 使用Flexbox实现CSS竖向居中
竖向居中需要一个父元素和一个子元素合作完成. <div class="flexbox-container"> <div>Blah blah</div& ...
- Nginx 禁止访问某个目录或文件的设置方法
如果基于WEB根目录下,要禁止用户访问/config目录,或者要禁止用户访问/config.ini(ZF常用INI,不过建议还是放到WEB目录以外的地方),可以通过location进行配置,返回403 ...