HTML5调用百度地图API进行地理定位实例
自从HTML5的标准确定以后，越来越多的网站使用HTML5来进行开发。虽然对HTML5支持的浏览器不是很多，但是依然抵挡不了大伙对HTML5开发的热情。今天为大家带来的是使用HTML5调用百度地图API进行地理定位实例。请看下面代码：
- <!DOCTYPE html>
- <html>
- <title>HTML5调用百度地图API进行地理定位实例</title>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>
- </head>
- <body style="margin:50px 10px;">
- <div id="status" style="text-align: center"></div>
- <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>
- </body>
- </html>
- <script type="text/javascript">
- //默认地理位置设置为上海市浦东新区
- var x=121.48789949,y=31.24916171;
- window.onload = function() {
- if(navigator.geolocation) {
- navigator.geolocation.getCurrentPosition(showPosition);
- document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
- // 百度地图API功能
- var map = new BMap.Map("container");
- var point = new BMap.Point(x,y);
- map.centerAndZoom(point,12);
- var geolocation = new BMap.Geolocation();
- geolocation.getCurrentPosition(function(r){
- if(this.getStatus() == BMAP_STATUS_SUCCESS){
- var mk = new BMap.Marker(r.point);
- map.addOverlay(mk);
- map.panTo(r.point);
- }
- else {
- alert('failed'+this.getStatus());
- }
- },{enableHighAccuracy: true})
- return;
- }
- alert("你的浏览器不支持获取地理位置！");
- };
- function showPosition(position){
- x=position.coords.latitude;
- y=position.coords.longitude;
- }
- </script>
看看运行效果：
HTML5调用百度地图API进行地理定位实例的更多相关文章
- HTML5 调用百度地图API地理定位
<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...
- HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...
- Geocoding java调用百度地图API v2.0 图文 实例（ 解决102错误）
如何使用? 第一步:申请ak(即获取密钥),若无百度账号则首先需要注册百度账号. 第二步,拼写发送http请求的url,注意需使用第一步申请的ak. 第三步,接收http请求返回的数据(支持json和 ...
- 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API
使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...
- HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...
- 调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
- 如何利用【百度地图API】进行定位？非GPS定位
原文:如何利用[百度地图API]进行定位?非GPS定位 如果你可以上网,如果你有火狐浏览器,那么恭喜你.你能很容易使用以下代码进行定位! ------------------------------- ...
- 调用百度地图API的总结
因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...
- 【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
随机推荐
- 域名解析-CNAME
不要把域名解析简单看成把一个域名指向一个IP那么简单的事. 事实上域名解析能做的事非常多. 简单样例,假如你买了一台server仅仅有一个IP,你想弄两站点,而且仅仅想直接通过IP就能訪问,就是不加什 ...
- DAO调用存储过程问题
相关文章:1.使用 Spring 框架调用 DB2 存储过程 2.Spring如何使用JdbcTemplate调用存储过程的三种情况 3.spring中调用存储过程,函数
- JSP的优势
以下列出了使用JSP带来的其他好处: 与ASP相比:JSP有两大优势.首先,动态部分用Java编写,而不是VB或其他MS专用语言,所以更加强大与易用.第二点就是JSP易于移植到非MS平台上. 与纯 S ...
- 一个关于运维人员做事的很好的case，拿出来和大家共勉
很久没有写KM了,最近lester这边在梳理CDB这边存在的问题,并推动那些问题解决措施的落地.无疑当前CDB存在比较多的问题,也有很多坑.需要我们运维和开发的同学多思考问题的根源和解决办法,并付诸实 ...
- 【BZOJ5016】[Snoi2017]一个简单的询问 莫队
[BZOJ5016][Snoi2017]一个简单的询问 Description 给你一个长度为N的序列ai,1≤i≤N和q组询问,每组询问读入l1,r1,l2,r2,需输出 get(l,r,x)表示计 ...
- nginx服务器的内核调优
TCP公有类 net.core.somaxconn = 262144 net.core.netdev_max_backlog = 262144 net.ipv4.ip_local_port_range ...
- UIApplicationDelegate 各方法回调时机
本篇文章主要介绍一些UIApplicationDelegate中几个常用的回调方法的调用时机.以帮助你判断哪些方法倒底放到哪个回调中去实现. 1. – (void)applicationDidFini ...
- 【python】-- RabbitMQ RPC模型
RabbitMQ RPC模型 RPC(remote procedure call)模型说通俗一点就是客户端发一个请求给远程服务端,让它去执行,然后服务端端再把执行的结果再返回给客户端. 1.服务端 i ...
- Delphi的未来，一点浅见
我是新手评议谈不上,但个人认为必须得跟主流大佬走,这同时也得有自己的核心技术,才最终能让自己成为大佬. ------------------------------------------------ ...
- BZOJXXXX: [IOI2000]邮局——四边形不等式优化初探
貌似$BZOJ$上并没有这个题... 是嫌这个题水了么... 还是要氪金权限号??? 这里附上洛谷的题面:洛谷P4767 [IOI2000]邮局 题目描述 高速公路旁边有一些村庄.高速公路表示为整数轴 ...