2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > html浏览位置坐标 HTML5教程 | HTML5地理定位(GeoLocation API)

html浏览位置坐标 HTML5教程 | HTML5地理定位(GeoLocation API)

时间:2020-05-22 16:20:15

相关推荐

html浏览位置坐标 HTML5教程 | HTML5地理定位(GeoLocation API)

HTML5 GeoLocation API(地理定位API)可以获取用户所在的地理位置。由于安全的原因,在使用HTML5 GeoLocation的时候,会弹出对话框让用户决定是否共享他们所在的位置,只有在用户同意的情况下,应用程序才可以获取用户的所在位置。

HTML5 GeoLocation的应用场景非常多。例如可以为用户提供他们所在地区的商品打折信息,你可以请求用户共享他们的地理位置,如果他们同意,应用程序就可以向他们提供该地区的相关产品的打折信息。

HTML5 GeoLocation的另一个应用场景是构建计算行走路程的应用程序。在用户跑步开始的时候,他可以通过手机浏览器打开应用程序,启动记录功能。在用户移动的过程中,应用程序会记录用户经过的距离,还可以把跑步对应的坐标显示在地图上,甚至可以显示海拔位置。

还有一种HTML5 GeoLocation的应用场景是基于GPS导航的社交网络应用。通过它可以看到好友的所在位置。

访问地理位置

我们可以使用浏览器的navigator.geolocation对象通过javascript来访问地理位置。地理位置对象允许我们使用两个函数来访问地理位置:

getCurrentPosition()

watchPosition()

getCurrentPosition()函数以快照的方式返回访问者的所在位置。watchPosition()返回访问者每一次位置发生改变之后的新位置。这两个函数都有下面的3个参数:

成功时的回调函数

失败时的回调函数(可选)

Geo location参数对象(可选)

下面是一个例子,它可以获取用户的所在位置,在getCurrentPosition()方法的参数中只传入了成功时的回调函数。

navigator.geolocation.getCurrentPosition(

function(position) {

alert("your position is: "

+ position.coords.latitude + ", "

+ position.coords.longitude);

}

);

要体验一下上面代码的效果,请点击这个按钮:

地理位置信息是异步获取的。这意味着你在调用getCurrentPosition()或watchPosition()函数时会立即返回。当浏览器发出获取用户的地理位置请求,并且用户同意了浏览器获取器地理位置,成功回调函数被调用。如果有错误发生,将会调用错误回调函数。

位置定位对象

定位对象传入的成功回调函数类似下面的样子:

double latitude // 只读属性

double longitude // 只读属性

double accuracy // 只读属性

double altitude // 只读属性

double altitudeAccuracy // 只读属性

double heading // 只读属性

double speed // 只读属性

latitude和longitude包含位置的地理坐标。accuracy包含精确到米的位置信息。精度越低,定位越精确。

altitude,altitudeAccuracy,heading和speed属性只有在设备浏览器中嵌入有GPS时才有效。没有的话,这些参数都可以设置为null。

altitude属性包含用户的地理位置的海拔高度信息。altitudeAccuracy属性包含精确到米的海拔高度。heading属性用于指明用户移动的方向。它的值是相对于正北的度数(degrees),范围0-360。speed属性包含用户的运动速度,以每秒多少米计算。

错误回调函数

如果获取用户的地理位置失败,传入到getCurrentPosition()或watchPosition()函数中的错误回调函数就会被调用。获取用户地理位置失败的原因可能有下面的几种:

用户拒绝浏览器访问他的地理位置。

设备浏览器无法获取地理位置。例如:运行浏览器的设置在一个隧道中,或在地底下等等,哪里无法接收到GPS卫星的信号。

设备获取地理位置超时。

错误回调函数接收一个带两个参数的对象:

short code // 无符号只读属性

DOMString message // 只读属性

code属性的值有下面3种可能的取值:

1,表示PERMISSION_DENIED

2,表示POSSITION_UNAVAILABLE

3,表示TIMEOUT

message属性包含错误信息的描述文本。这些错误信息对于开发者来说是有用的,但是它们不应该对浏览者开放。

地理位置选项对象

getCurrentPosition()和watchPosition()函数可以传入一个带3个属性参数的地理位置选项对象。选项对象可以包含下面的3个属性:

enableHighAccuracy // true 或 false

timeout // 毫秒

maximumAge // 毫秒

enableHighAccuracy属性可以设置为true或false。设置为true时,如果设备浏览器中有GPS,它将被启用。需要注意的是,GPS是十分耗电的,所以除非在需要的时候,否则不要打开它。

timeout属性指定在获取地理位置的时候,等待多长时间可以定义为超时。超时时会调用错误回调函数。

maximumAge属性指定浏览器缓存一个地理位置多长时间。将它设置为0时,在每次调用成功回调函数时都会获取新的地理位置。

一个完整的HTML5地理定位的例子

下面是一个完整的获取地理位置的例子,包含成功回调函数和失败回调函数,以及一个选项对象:

navigator.geolocation.getCurrentPosition(

function(position) {

alert("your position is: "

+ position.coords.latitude + ", "

+ position.coords.longitude);

}

,

function(errorObject) {

alert("Error obtaining position");

}

,

{

enableHighAccuracy : true,

timeout : 3000,

maximumAge : 60000

}

);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。