`
longgangbai
  • 浏览: 7332014 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

HTML5 的GEOLocation的API

 
阅读更多

      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) - 互联网界的读者文摘

分享到:
评论
1 楼 xpxia 2014-08-04  
碰到一个问题啊,现在Android手机上不能获取定位信息了,这个是为什么呢?

相关推荐

    HTML5 Geolocation API的正确使用方法

    HTML5 Geolocation API是Web开发中的一个重要工具,它允许网页应用程序获取访问设备的地理位置信息,如经纬度坐标、高度、速度等。这个API是HTML5标准的一部分,为开发者提供了无须借助外部插件就能实现地理位置服务...

    HTML5 geoLocation API

    HTML5的地理定位功能演示

    基于Html5 中 geolocation API 开发的交友应用网站.zip

    "基于Html5中geolocation API开发的交友应用网站"这一标题揭示了我们讨论的主题,即一个利用HTML5的Geolocation API构建的在线社交平台。Geolocation API是HTML5的一项重要功能,它允许网页应用获取用户的地理位置...

    基于HTML5_Geolocation_考勤管理系统.doc

    Geolocation API是HTML5提供的一种获取用户当前位置的API,可以通过浏览器获取用户的当前位置,并将其应用于各种应用场景中,如考勤管理系统、导航系统等。 知识点4: 考勤管理系统的设计与实现 本文完成了一个基于...

    HTML5Geolocation-英文原版.zip

    HTML5是现代网页开发的核心标准之一,其引入了许多新的特性和功能,其中之一就是Geolocation API。这个API允许web应用获取用户的地理位置信息,为构建位置感知的应用提供了强大的支持。"HTML5Geolocation-英文原版....

    ngGeolocator:让用户在 HTML5 Geolocation API 和 Google Maps 的帮助下告诉你他们在哪里

    ng地理定位器 让用户借助 HTML5 Geolocation API 和 Google Maps 告诉您他们在哪里。 现场演示: : 该项目使用作为起点。安装 npm install --save ng-geolocator或者 bower install --save ng-geolocator入门有关...

    mockgeolocation:用于模拟 html 5 geolocation api 的库

    MockGeolocation 是一个用于模拟 html 5 geolocation api 的库。 用法 // simulate a geolocation MockGeolocation.setCurrentLatLng(53.4152431, -8.2390307) // get current position navigator.geolocation....

    基于HTML5Geolocation考勤管理系统方案.doc

    系统设计与实现过程中,HTML5 Geolocation API起到了核心作用。该API允许网页应用程序获取用户的经度和纬度坐标,通常结合GPS、Wi-Fi信号或移动网络数据来确定位置。为了确保定位的准确性,系统可能需要考虑多种定位...

    Python-Seeker利用HTML5JavascriptJQuery和PHP以高精度获取设备信息和GeoLocation

    【HTML5 GeoLocation API】 HTML5的GeoLocation API是获取用户地理位置的关键。它允许Web应用程序在用户的许可下访问其设备的GPS或其他定位服务提供的经纬度数据。Seeker利用这一功能,能够精确地确定用户的位置,...

    深入HTML5应用开发

    第一部分介绍了HTML5 Geolocation API。使用这种API,开发人员不必针对特定设备编程,就能够在浏览器中直接编写地理定位应用。这部分共6章,介绍了Geolocation API在浏览器代码中的使用,并通过大量示例向读者展示其...

    Find-Nearest-Marketo-Office:示例展示了如何通过 HTML5 Geolocation API 根据用户的位置动态更改页面内容

    查找最近的 Marketo-Office 此示例获取用户的位置,并返回最近的 Marketo 办公室位置及其电话号码。 如果无法访问用户的位置,则脚本默认为 Marketo 的... 该示例使用和 HTML5 Geolocation API。 讨论了更多实施细节。

    HTML5 调用百度地图API地理定位.pdf

    #### 一、HTML5 Geolocation API简介 HTML5中的Geolocation API为网页提供了获取用户地理位置的功能。它通过浏览器与操作系统交互来获取设备的位置信息,并以标准格式返回给Web应用程序。这对于开发需要地理位置...

    基于浏览器的HTML5地理定位.docx

    这项技术主要依赖于HTML5的Geolocation API,该API提供了一种标准化的方法来获取用户的地理位置,使得开发者可以构建出更具有个性化的地理位置服务,例如导航、本地搜索和社交分享等功能。 1. **HTML5 Geolocation ...

    html5定位代码

    HTML5的Geolocation API是浏览器内置的一个功能,允许网页获取用户的地理位置信息。通过调用`navigator.geolocation`对象,开发者可以请求访问用户的GPS、Wi-Fi、IP地址等数据来估计位置。 2. **获取位置信息** ...

    深入HTML+5应用开发

    第一部分介绍了HTML5 Geolocation API。使用这种API,开发人员不必针对特定设备编程,就能够在浏览器中直接编写地理定位应用。这部分共6章,介绍了Geolocation API在浏览器代码中的使用,并通过大量示例向读者展示其...

    HTML5高级程序设计

    从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、communication、websocket、forms、web workers、storage 等api 的使用, 辅以直观明了的客户端和服务器端示例代码,让...

    完整版《HTML5高级程序设计》2

    为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用,并以大量的示例涵盖全部HTML5 API。此外,还介绍...

    完整版《HTML5高级程序设计》5

    为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用,并以大量的示例涵盖全部HTML5 API。此外,还介绍...

Global site tag (gtag.js) - Google Analytics