建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

使用javascript获取位置(JavaScript地理位置信息API的详细内容)

GG网络技术分享 2025-03-18 16:14 0


使用javascript获取位置

首先,我们使用caniuse-cmd查看下geolocation的兼容性,几乎所有的现代浏览器都支持geolocation

Geolocation 通过使用GPS、WIFI、IP地址检测自己的位置信息,开发人员可使用这些信息给用户提供更好的搜索建议,比如附近的便利店,并实现互动。

本地资源(location sources) JavaScript提供了一个简单,但功能强大的工具来定位设备的地理定位API的形式。它包括一个小的一组易于使用的方法,可以获得设备的位置:

GPS-主要在移动设备,精确到10米 WIFI-几乎所有的联网设备 IP-仅限于区域,备选方案 采用哪种方案取决于浏览器支持,一般情况下WIFI快于GPS快于IP

使用geolocation api 通过使用caniuse-cmd,我们知道大部分浏览器支持geolocation,但我们需要做好判断,请确保可以正常使用geolocation

navigator.geolocation有如下几个方法:

Geolocation.getCurrentPosition()-获取当前位置

Geolocation.watchPosition()-监测定位

Geolocation.clearWatch()-清除监测

getCurrentPosition() 和 watchPosition() 方法的工作方式是基本相同的。这两方法目的基本相同,都是用来去获取device的位置信息吧, 都是以一个异步的工作形式来获取位置信息的, 他们也都依赖于一个attempt call的结果

如上,使用geolocation api很简单,只需要正确调用方法,等待返回坐标即可。

用户权限 由于geolocation api会暴露用户信息,所以当应用程序访问的时候,将以弹窗请求用户操作,如下

主机安全 另一个保护措施是使用HTTPS连接。由于一个新的网络安全策略,谷歌浏览器(桌面版和手机版)不再允许非安全的主机上运行的geolocation api。使用https可以最大限度的减少数据信息的盗用或被滥用的风险。

JavaScript地理位置信息API的详细内容

对于一个Web开发程序员来说,开发工作中一个最有意思的方面就是获取地理位置信息;试想一下,浏览你的网页的用户是在什么地方?程序员可以根据用户的地理位置信息来调整网站的语言、特定产品介绍等。下面我们将要演示的就是通过浏览器里JavaScript地理位置信息API来获取详细地理信息!

检查你的浏览器是否支持地理位置信息API

目前主流的浏览器都已经对JavaScript地理位置信息API有了较好的支持。但如果你还不放心,那么,确认地理位置信息API支持情况最好的方式是浏览器的功能特征测试。

if(\"geolocation\" in navigator) {

//w00t!

}

else {

alert(\"很不幸!你的浏览器并不支持Geolocation API功能\");

}

对于判断浏览器是否支持地理位置API,最主要的就是看看navigator.geolocation这个对象,使用in,而不是简单的使用if(navigator.geolocation),这一点非常重要,因为后者有可能会因此初始化地理位置信息对象,从而占用/锁定了设备资源。

查询地理位置信息

这个navigator.geolocation.getCurrentPosition方法是获取详细位置信息最关键的一个接口:

if(\"geolocation\" in navigator) {

navigator.geolocation.getCurrentPosition(function(position) {

console.log(position);

});

}

一旦你调用了这个方法(如果请求成功,它会执行你在参数里提供的回调方法),浏览器会询问用户是否允许程序获取他们的地理位置信息:

当用户运行网页获取他们的位置信息后,浏览器就可以开始读取地理信息,它会返回给你一个位置信息对象,对象的结构基本是这样的:

// \"Position\" object

{

coords: { \"Coordinates\" object

accuracy: 65,

altitude: 294.4074401855469,

altitudeAccuracy: 10,

heading: -1,

latitude: 43.01256284360166,

longitude: -89.44531987692744,

speed: -1

},

timestamp: 1429722992094269

}

如果你觉得这些地理位置信息(地理经纬度坐标)还不够充足,还想要这些地理坐标属于哪个国家、城市,则你需要再调用其它的第三方数据库——这里我们就不细述了。

这个地理位置信息API在很多移动应用里是最常见的API运用,作为Web程序员,它应该是你必须具备的一项知识技巧。幸运的是,目前所有流行的浏览器都支持了这种技术。祝编程快乐!

以上就是学习JavaScript地理位置信息API的详细内容,更多请关注网站的其它相关文章!

JavaScript地理位置信息API的详细内容 (https://www.wpmee.com/) javascript教程 第1张

标签:

提交需求或反馈

Demand feedback