欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html5中地理位置定位api接口开发应用小结

程序员文章站 2023-11-27 10:33:28
HTML 5提供了地理位置等一系列API可以给用户使用,方便用户制作LBS的地理应用,首先在支持HTML 5的浏览器中,当开启API时,会询问是否用户同意使用api,否则不会开启的,保证安全... 13-01-04...
地理位置定位的几种方式:ip地址,gps,wifi,gsm/cdma

地理位置获取流程
1、用户打开需要获取地理位置的web应用。
2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。
3、假设用户允许,浏览器从设别查询相关信息。
4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。

html5地理地位的实现
1. 实现基于浏览器(无需后端支持)获取用户的地理位置技术
2. 精确定位用户的地理位置( 精度最高达10m之内,依赖设备 )
3. 持续追踪用户的地理位置
4. 与 google map、或者 baidu map 交互呈现位置信息

geolocation api 用于将用户当前地理位置信息共享给信任的站点,这涉及用户的隐私安全问题,所以当一个站点需要获取用户的当前地理位置,浏览器会提示用户是“允许” or “拒绝”。
先看看哪些浏览器支持geolocation api:
ie9.0+、ff3.5+、safari5.0+、chrome5.0+、opera10.6+、iphone3.0+、android2.0+
geolocation api存在于navigator对象中,只包含3个方法:

复制代码
代码如下:

1、getcurrentposition //当前位置
2、watchposition //监视位置
3、clearwatch //清除监视
navigator.geolocation.getcurrentposition( … , function(error){
switch(error.code){
case error.timeout :
alert( " 连接超时,请重试 " );
break;
case error.permission_denied :
alert( " 您拒绝了使用位置共享服务,查询已取消 " );
break;
case error.position_unavailable :
alert( " ,抱歉,暂时无法为您所在的星球提供位置服务 " );
break;
}
});

watchposition像一个追踪器与clearwatch成对。
watchposition与clearwatch有点像setinterval和clearinterval的工作方式。
var watchpositionid = navigator.geolocation.watchposition(success_callback, error_callback, options);
navigator.geolocation.clearwatch(watchpositionid );

html 5提供了地理位置等一系列api可以给用户使用,方便用户制作lbs的地理应用,首先在支持html 5的浏览器中,当开启api时,会询问是否用户同意使用api,否则不会开启的,保证安全。
1、开启,判断是否浏览器支持lbs api

复制代码
代码如下:

function isgeolocationapiavailable()
{
var location = "no, geolocation is not supported by this browser.";
if (window.navigator.geolocation) {
location = "yes, geolocation is supported by this browser.";
}
alert(location);
}

上面的例子中,还在displayerror方法中,捕捉了异常;
2、获得用户的地理位置
这个使用getcurrentposition就可以了;

复制代码
代码如下:

function requestposition() {
if (nav == null) {
nav = window.navigator;
}
if (nav != null) {
var geoloc = nav.geolocation;
if (geoloc != null) {
geoloc.getcurrentposition(successcallback);
}
else {
alert("geolocation api is not supported in your browser");
}
}
else {
alert("navigator is not found");
}
}

当获得地理位置成功后,会产生一个回调方法了,处理返回的结果,

复制代码
代码如下:

function setlocation(val, e) {
document.getelementbyid(e).value = val;
}
function successcallback(position)
{
setlocation(position.coords.latitude, "latitude"); setlocation(position.coords.longitude, "longitude");
}

3、一个很常见的问题,是如何跟踪用户不断变化的地理位置,这里小结下其中用到的两个api
1 watchposition
例子如下:

复制代码
代码如下:

function listenforpositionupdates() {
if (nav == null) {
nav = window.navigator;
}
if (nav != null) {
var geoloc = nav.geolocation;
if (geoloc != null) {
watchid = geoloc.watchposition(successcallback);
} else {
alert("geolocation api is not supported in your browser");
}
} else {
alert("navigator is not found");
}
}

然后在successcallback中,就可以设置显示最新的地理位置:

复制代码
代码如下:

function successcallback(position){
settext(position.coords.latitude, "latitude"); settext(position.coords.longitude, "longitude");
}

如果不希望实时跟踪,则可以取消之:
function clearwatch(watchid) {
window.navigator.geolocation.clearwatch(watchid);
}
4、如何处理异常
当遇到异常时,可以捕捉之:

复制代码
代码如下:

if (geoloc != null) {
geoloc.getcurrentposition(successcallback, errorcallback);
}
function errorcallback(error) {
var message = "";
switch (error.code) {
case error.permission_denied:
message = "this website does not have permission to use "
+ "the geolocation api";
break;
case error.position_unavailable:
message = "the current position could not be determined.";
break;
case error.permission_denied_timeout:
message = "the current position could not be determined "
+ "within the specified timeout period.";
break;
}
if (message == "") {
var strerrorcode = error.code.tostring();
message = "the position could not be determined due to "
+ "an unknown error (code: " + strerrorcode + ").";
}
alert(message);
}

5、 在google 地图上显示位置(前提是有google map api等设置好)

复制代码
代码如下:

function getcurrentlocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getcurrentposition(showmyposition,showerror);
}
else
{
alert("no, geolocation api is not supported by this browser.");
}
}
function showmyposition(position)
{
var coordinates=position.coords.latitude+","+position.coords.longitude;
var map_url="http://maps.googleapis.com/maps/api/staticmap?center="
+coordinates+"&zoom=14&size=300x300&sensor=false";
document.getelementbyid("googlemap").innerhtml="<img src='"+map_url+"' />";
}
function showerror(error)
{
switch(error.code)
{
case error.permission_denied:
alert("this website does not have permission to use the geolocation api")
break;
case error.position_unavailable:
alert("the current position could not be determined.")
break;
case error.timeout:
alert("the current position could not be determined within the specified time out period.")
break;
case error.unknown_error:
alert("the position could not be determined due to an unknown error.")
break;
}
}