HTML5 的GEOLocation的API

longgangbai

浏览: 7251258 次
性别:
来自: 上海

最近访客更多访客>>

paladin1988

ljq867

yuxiangtong

chen88358323

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Geolocation API用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许” or “拒绝”。

先看看哪些浏览器支持Geolocation API：
IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+
也就是说除IE6~IE8外，其它最新的浏览器基本上都支持，包括最新的移动手机。
Geolocation API存在于navigator对象中，只包含3个方法：
1、getCurrentPosition
2、watchPosition
3、clearWatch
getCurrentPosition、watchPosition的参数说明，示例：
navigator.geolocation.getCurrentPosition(success_callback, error_callback, {geolocation选项});
第一个参数是用户允许浏览器共享geolocation成功后的回调方法
第二个参数是用获取地理位置信息失败的处理方法，传入错误对象，包含code、message两个属性
第三个参数都是geolocation选项，所有的geolocation选项都是可选的，它包含的属性如下：
enableHighAccuracy(Boolean型，默认为false，是否尝试更精确地读取纬度和经度，移动设备上，这可能要使用手机上的GPS，这会消耗移动设备更多的电量)
timeout(单位为毫秒，默认值为0，在放弃并触发处理程序之前，可以等待的时间----用户选择期间是不计时的)
maximumAge(单位为毫秒，默认值为0。用来告诉浏览器是否使用最近缓存的位置数据，如果在maximumAge内有一个请求，将会返回它，而不请求新位置。 maximumAge如果为Infinity，则总是使用一个缓存的位置，如果为0则必须在每次请求时查找一个新位置)
简单的一个示例：

当我点击拒绝时：

当点击允许时：

html源代码：

<html> 
<head> 
<meta http-equiv="Content-Type" contentType="text/html; charset=UTF-8" %> 
<title>HTML5 物理定位</title> 
<script type="text/javascript">
window.onload=function(){
    var options={
            enableHighAccuracy:true,
            maximunAge:1000,
            timeout:45000
    };
    if(window.navigator.geolocation){
        navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);
    }else{
        alert("你的浏览器不支持定位!");
    }
}
function successCallback(position){
    var output="";
    output +="Your position has bean located . \r\n";
    output+=" Latitude:"+position.coords.latitude+" ";
    output+=" Longitude:"+position.coords.longitude+" ";
    output+=" Accuracy :"+position.coords.accuracy +" meters";
    if(position.coords.latitude){
        output+=" Accuracy :"+position.coords.altitudeAccuracy +" meters";
    }
    if(position.coords.heading){
        output+=" Heading :"+position.coords.Heading +" meters";
    }
    if(position.coords.speed){
        output+=" Speed :"+position.coords.Speed +" m/s";
    }
    output+=" Time of Position "+position.timestamp +" m/s";
    alert(output);
}
function errorCallback(error){
   switch(error.code){
   case error.PERMISSION_DENIED:
       alert("you have denied access to your position .");
       break;
   case error.POSITION_UNAVAILABLE:
       alert("there was a problem getting yout position .");
       break;
   case error.TIMEOUT:
       alert("The application has timed out attempting to get your location .");
       break;
       
   }
}
</script>
</head> 
<body > 
    
</body> 
</html>

上面的例子中，只使用了success_callback中的纬度(latitude)和经度(longitude)，成功后回调获取用户位置数据position，它包含两个属性：coords、timestamp。
coords属性有7个值，包含上面用到的纬度、经度。
1、accuracy 准确角
2、altitude 海拔高度
3、altitudeAcuracy 海拔高度的精确度
4、heading 行进方向
5、speed 地面的速度
根据获得的纬度与经度，很容易将用户的位置在google地图中显示出来，如下例所示：

核心的javascript脚本：

在google地图+HTML5定位个人位置

<html>    
<head>    
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />   
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>    
<title>google GEO 物理定位 </title>    

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function getElem(id) {
    return typeof id === 'string' ? document.getElementById(id) : id;
}
function success(position) {
    var mapcanvas = document.createElement('div');
    mapcanvas.id = 'mapcanvas';
    mapcanvas.style.height = '100%';
    mapcanvas.style.width = '100%';
    getElem("map_canvas").appendChild(mapcanvas);
    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeControl: false,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
    var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"你在这里！"
    });
}
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success); 
} else {
   alert("您当前使用的浏览器不支持geolocation服务");
}  
</script>
</head>
<body>
 <div id="map_canvas"></div>
</body>
</html>

watchPosition像一个追踪器，与clearWatch成对。watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
navigator.geolocation.clearWatch(watchPositionId );

利用百度+HTML5定位个人位置：

<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'>
<title>百度地图</title>
<script type='text/javascript' src='http://api.map.baidu.com/api?v=1.3'></script>
<script type='text/javascript'>

function getLocation()
{
	if(navigator.geolocation){
		navigator.geolocation.getCurrentPosition(showMap, handleError, {enableHighAccuracy:true, maximumAge:1000});
	}else{
		alert('您的浏览器不支持使用HTML 5来获取地理位置服务');
	}
}

function showMap(value)
{
	var longitude = value.coords.longitude;
	var latitude = value.coords.latitude;
	var map = new BMap.Map('map');
	var point = new BMap.Point(longitude, latitude);    // 创建点坐标
	map.centerAndZoom(point, 15);
	var marker = new BMap.Marker(new BMap.Point(longitude, latitude));  // 创建标注
	map.addOverlay(marker);              // 将标注添加到地图中
}

function handleError(value)
{
	switch(value.code){
		case 1:
			alert('位置服务被拒绝');
			break;
		case 2:
			alert('暂时获取不到位置信息');
			break;
		case 3:
			alert('获取信息超时');
			break;
		case 4:
			alert('未知错误');
		break;
	}
}

function init()
{
	getLocation();
}

window.onload = init;

</script>
</head>

<body>
<div id='map' style='width:600px;height:600px;'></div>
</body>
</html>

关于Geolocation API的更多参考：
W3C geolocation API
Gears
BlackBerry geolocation API
Nokia geolocation API
Palm geolocation API
OMTP BONDI geolocation API
geo.js
Internet Explorer 9 Guide for Developers: Geolocation
MDN Using geolocation
http://diveintohtml5.org/geolocation.html

来源：草根网(www.20ju.com) - 互联网界的读者文摘

分享到：

HTML5 canvas实现电子签名 | 【转】移动互联网应用的推广方法

2012-05-29 10:15
浏览 7106
评论(1)
分类:移动开发
查看更多

1 楼 xpxia 2014-08-04

碰到一个问题啊，现在Android手机上不能获取定位信息了，这个是为什么呢？

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

基于STM32通过PWM驱动直流电机: 工程代码基于STM32F103C8T6，使用PWM输出驱动电机，电机驱动使用TB6612，通过按键控制电机速度，并且速度通过OLED显示屏进行显示使用到的硬件：STM32F103C8T6最小系统板，四针脚OLED显示屏，直流电机，按键，TB6612电机驱动模块

最新微信文章编辑器排版工具程序源码.rar: 最新微信文章编辑器排版工具程序源码.rar最新微信文章编辑器排版工具程序源码.rar最新微信文章编辑器排版工具程序源码.rar

信息办公电信计费系统完整代码-netctossconformity.rar: 这个压缩包 "netctossconformity.rar" 包含了一套电信计费系统的完整代码，它是针对计算机专业学生或开发者的JSP源码资料。这套系统的设计旨在为电信运营商提供一个可靠、高效的计费解决方案。通常，这种系统会涉及到用户账户管理、费用计算、账单生成、支付处理以及数据报告等功能模块。在内容上，该资料包可能包括了前端用户界面和后端服务器逻辑的源代码，使用JSP（Java Server Pages）技术实现。前端可能会涵盖用户注册、登录、查看账单和支付历史等操作的用户界面，而后端则包含数据库交互、计费算法、用户验证和安全性措施等关键功能。对于学习者来说，这个资料包是一个宝贵的实践资源，可以帮助他们理解电信计费系统的工作原理，以及如何运用JSP技术开发复杂的商业应用。通过分析这些代码，可以加深对Java Web技术栈的理解，包括但不限于Servlet API、JDBC（Java Database Connectivity）、HTML/CSS/JavaScript，以及可能涉及的框架如Spring或Struts。此外，这个资料包也可能含有一些文档，例如系统设计说明、代码结构介绍、部

交流电桥实验（95）.zip: 交流电桥实验（95）.zip

matlab基于四自由度机械臂的轨迹规划源码.zip: 优秀源码设计，详情请查看资源内容

MRU3-2保护技术简化电压继电器对称分量评估 SEG: MRU3-2保护技术简化电压继电器对称分量评估 MRU3-2保护技术简单电压继电器，具有对称分量评估功能

图3-7.zip: 图3-7.zip

基于matlab开发的多元散射校正和变量标准化Matlab处理程序，可以对建模前的原始数据进行校正、处理.rar: 基于matlab开发的多元散射校正和变量标准化Matlab处理程序，可以对建模前的原始数据进行校正、处理.rar

新建文本文档.txt: 新建文本文档.txt

最新获取QQ微信头像橘头像阁PHP源码下载.rar: 最新获取QQ微信头像橘头像阁PHP源码下载.rar最新获取QQ微信头像橘头像阁PHP源码下载.rar

3D模型004，可用于建模、GIS、BIM、CIM学习: 3D模型004，可用于建模、GIS、BIM、CIM学习

node-v6.7.0.tar.xz: Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

其他类别动态显示JSP服务器内存的Ajax程序图像版-systemjc.rar: 在当今的Web开发中，实时监控服务器性能是至关重要的。其中，动态显示JSP服务器内存的Ajax程序图像版_systemjc.rar是一个为开发者和系统管理员提供便利的计算机专业JSP源码资料包。这个资料包的核心是一个高效的Ajax程序，它能够实时获取并展示JSP服务器的内存使用情况。通过使用这一工具，用户可以在一个直观的界面上看到服务器内存的使用率、已使用内存、可用内存等关键信息，而这一切都无需刷新页面。这得益于Ajax技术的强大功能，它允许在后台与服务器进行异步通信，从而获取最新的数据并更新前端界面。这个资料包不仅包含了完整的源代码，还提供了详细的文档和注释，使得即使是初级的JSP开发者也能够轻松地部署和使用。此外，它的图像版设计使得数据的展示更加直观和友好，帮助用户快速识别任何潜在的问题。总的来说，动态显示JSP服务器内存的Ajax程序图像版_systemjc.rar是一个强大、实用且易于使用的JSP源码资料包，它为实时监控服务器性能提供了一个有效的解决方案。重新回答||

引领AI视频生成技术新潮流之Sora AI: Sora AI，作为OpenAI继ChatGPT之后的又一重磅力作，以其独特的文本到视频模型技术，在AI内容创作领域掀起了一场革命性的风暴。本文将详细探讨Sora AI的技术特点、应用场景以及未来发展趋势，展现其在视频制作、广告、教育和娱乐产业中的巨大潜力。 Sora AI作为OpenAI的又一力作，以其独特的文本到视频模型技术引领了AI视频生成技术的新潮流。通过深入了解Sora AI的技术特点、应用场景和未来发展趋势，我们可以看到它在视频制作、广告、教育和娱乐产业中的巨大潜力和广阔前景。然而，我们也应清醒地认识到，技术的发展总是伴随着挑战和问题，只有不断探索和解决这些问题，才能让Sora AI更好地服务于人类社会。

新闻文章NTsky新闻发布系统 v1.0稳定版-18655.rar: NTsky新闻发布系统 v1.0稳定版_18655.rar是一款专为计算机专业人士设计的JSP源码资料包。这款资料包的主要功能是帮助用户快速、高效地管理和发布新闻信息。它采用了先进的JSP技术，结合了数据库管理系统，使得新闻的发布和管理变得简单而直观。该资料包包含了完整的源代码，用户可以根据自己的需求进行修改和优化。同时，它还提供了详细的使用说明和技术文档，即使是对JSP技术不太熟悉的用户，也能快速上手。此外，该资料包还具有良好的用户界面设计，使得操作更加人性化。NTsky新闻发布系统 v1.0稳定版_18655.rar的另一个优点是其稳定性。经过多次测试和优化，该系统已经达到了稳定运行的状态，可以满足用户在各种环境下的使用需求。无论是在个人电脑上，还是在服务器上，都能稳定运行。总的来说，NTsky新闻发布系统 v1.0稳定版_18655.rar是一款功能强大、操作简便、稳定性高的JSP源码资料包。无论是对于专业的计算机人士，还是对于初学者，都是一个很好的学习和使用工具。重新回答||

node-v6.17.1.tar.xz: Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

245ssm-mysql-jsp 在线租房系统.zip（可运行源码+数据库文件+文档）: 此次开发的是一款在线的租房管理系统，该系统从功能上来看，应该具备以下模块：（1）房源信息模块：房源信息展示、房源信息更新、房源信息增加、房源信息删除；（2）账户管理模块：账户登录、账户绑定、账户管理；（3）租金结算模块：每月租金信息、租金交付功能、月租金收入总额统计；（4）房屋租赁合同管理模块：房屋租赁合同录入、房屋租赁合同展示、房屋租赁价格修改、房屋租赁合同终止；（5）报障模块：租客报账、管理员报障审核、租客报障统计；（6）日程模块：收租日程显示；从角色的需求上来划分，应当具有三个角色要素，分别为租客、出租方以及管理员三个角色，租客能够实现在线的查看房源，申请租房，签订租赁合同以及租金每月支付等功能。房东应当可以实现租金收入的统计，租赁合同的展示以及租赁价格的修改等。管理员能够通过后台的管理对网站信息进行常规化的管理操作。通过SSM框架技术搭建在线租房网站，能够实现出租方在线登记房源信息，租赁方能够在线查看消息，并在线与出租人进行沟通，可以实现在线租房申请。后台的管理员能够通过管理手段来对整个系统进行维护和管理。

udacity机器学习工程师毕业项目.zip: 机器学习是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。它专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。机器学习是人工智能的核心，是使计算机具有智能的根本途径。机器学习的发展历程可以追溯到20世纪50年代，当时Arthur Samuel在IBM开发了第一个自我学习程序，一个西洋棋程序，这标志着机器学习的起步。随后，Frank Rosenblatt发明了第一个人工神经网络模型——感知机。在接下来的几十年里，机器学习领域取得了许多重要的进展，包括最近邻算法、决策树、随机森林、深度学习等算法和技术的发展。机器学习有着广泛的应用场景，如自然语言处理、物体识别和智能驾驶、市场营销和个性化推荐等。通过分析大量的数据，机器学习可以帮助我们更好地理解和解决各种复杂的问题。例如，在自然语言处理领域，机器学习技术可以实现机器翻译、语音识别、文本分类和情感分析等功能；在物体识别和智能驾驶领域，机器学习可以通过训练模型来识别图像和视频中的物体，并实现智能驾驶等功能；在市场营销领域，机器学习可以帮助企业分析用户的购买行为和偏好，提供个性化的产品推荐和定制化的营销策略。总的来说，机器学习是一个快速发展且充满潜力的领域，它正在不断地改变我们的生活和工作方式。随着技术的不断进步和应用场景的不断扩展，相信机器学习将会在未来发挥更加重要的作用。

node-v12.6.0-x86.msi: Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

最新UI站长引流工具箱带后台+安装说明.rar: 最新UI站长引流工具箱带后台+安装说明.rar最新UI站长引流工具箱带后台+安装说明.rar最新UI站长引流工具箱带后台+安装说明.rar

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论