HTML5 的GEOLocation的API

最新推荐文章于 2025-06-15 17:19:36 发布

longgangbai

最新推荐文章于 2025-06-15 17:19:36 发布

阅读量201

点赞数

CC 4.0 BY-SA版权

分类专栏： Phonegap学习总结文章标签： javascript 移动开发 ViewUI

本文链接：https://blog.youkuaiyun.com/longgangbai/article/details/84225032

Phonegap学习总结专栏收录该内容

32 篇文章

订阅专栏

本文深入探讨了HTML5地理定位API的原理、使用方法及其实现过程，通过具体示例展示了如何在网页中获取用户当前位置，并将其在地图上展示。同时，介绍了不同浏览器的支持情况及API的常用方法，如getCurrentPosition、watchPosition和clearWatch，以及如何处理地理位置获取中的权限问题。最后，提供了基于百度地图实现HTML5定位的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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