自从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/ ...
随机推荐
-
Android开发之《常用工具及文档汇总》
GreenVPN:https://www.getgreenjsq.com/ Android开发工具.资料下载汇总:http://androiddevtools.cn/#img-size-handle- ...
-
初学PHP
这东西必须得静下心来学,快是快不来的,得有一个痛苦的过程.<PHP和MySQL WEB开发>这本书很值得一看,有了坚实的基础,推荐看<深入php++面向对象.模式与实践+第三版> ...
-
标识映射(Identify Map)
通过在Map中保存每个已加载过的对象,确保每个对象只加载一次. 当要访问对象时,首先检查标识映射,看需要的对象是否已经存在其中. 使用Identify来确保不重复加载相同的数据,不仅有助于保证正确性( ...
-
异常情况下的Activity生命周期分析
情况1:资源相关的系统配置发生改变 资源相关的系统配置发生改变,举个栗子.当前Activity处于竖屏状态的时候突然转成横屏,系统配置发生了改变,Activity就会销毁并且重建,其onPause, ...
-
Java正则表达式详解教程
public class Test { private static Scanner scanner; public static void main(String[] args) { scanner ...
-
oracle 全文检索
一.使用 sys 用户登录oracle (1)运行—cmd—sqlplus — sys/密码 @连接字符 as sysdba 二.授权 1.grant ctxapp to 全文检索使用用户: 2.gr ...
-
SQL Server 查看指定表上的索引
解决方案: sys.indexs; ---------------------------------------------------------------------------------- ...
-
php定时自动执行 需启动第一次
1 2 3 4 5 6 7 8 9 10 11 12 <? ignore_user_abort(); //即使Client断开(如关掉浏览器),PHP脚本也可以继续执行. set_time_li ...
-
Storm的部署
配置方案如下 node1 Nimbus zookeeper node2 Supervisor zookeeper node3 Supervisor zookeeper node4 Supervisor ...
-
【每日一题】Squares UVA - 201 暴力+输出坑 + 读文件模板
题意 给你n*n的图,让你数正方形 题解:暴力for每个点,对于每个点从它出发顺时针走一个正方形.走完就ans[i]++; 坑:多输了一行******,然后在那里手摸样例,无限debug orz #d ...