一、位置信息
1、数据
位置信息由经度、纬度坐标和一些其他元数据组成。
纬度:距离赤道以北或以南的数值。比如:39.17222
经度:距离英国格林威治以东或以西的数值。比如:-120.13778
经纬度可以以十进制表示,也可以以DMS(角度)格式表示。
HTML5 Geolocation API的坐标格式是十进制格式。
除经纬度外,HTML5 Geolocation还提供坐标的准确度。依据浏览器所在的硬件设备,还可能提供一些元数据,包括海拔、海拔准确度、行驶方向和速度等。如果这些元数据不存在则返回null。
2、位置信息从何而来
API并不能保证设备返回的是惠及位置是精确的。
设备可以使用下列数据源
- IP地址
- 三维坐标
- GPS(Global Positioning System,全球定位系统);
- 从RFID、Wi-Fi和蓝牙到Wi-Fi的MAC地址;
- GSM或CDMA手机的ID
- 用户自定义数据
IP地址定位数据的优缺点
优点 |
缺点 |
任何地方都可用 |
不精确(经常出错,一般精确到城市级) |
在服务器端处理 |
运算代价大 |
GPS定位数据的优缺点
优点 |
缺点 |
很精确 |
定位时间长,用户耗电量大 |
|
室内效果不好 |
|
需要额外硬件设备 |
Wi-Fi定位数据优缺点
优点 |
缺点 |
精确 |
在乡村这些无线接入点较少的地区效果不好 |
可在室内使用 |
|
可以简单、快捷定位 |
|
手机地理数据优缺点
优点 |
缺点 |
相当准确 |
需要能够访问手机或其moden的设备 |
可在室内使用 |
在基站较少的片源地区效果不好 |
可以简单、快捷定位 |
|
用户自定义的地理定位数据
优点 |
缺点 |
用户可以获得比程序定位服务更准确的位置数据 |
可能很不准确,特别是当用户位置变更后 |
允许地理定位服务的结果作为备用位置信息 |
|
用户自行输入可能比自动检测更快 |
|
用户所在位置属于敏感信息,HTML5 Geolocation规范提供了一套保护用户隐私的机制。除非得到 用户明确许可,否则不可获取位置信息。
二、使用Geolocation API
1、浏览器支持检查
目前主流浏览器都支持Geolocation API。要查看某个版本是否支持可参考http://caniuse.com
用脚本检查支持性:
function loadDemo() {
if (navigator.geolocation) {
document.getElementById("support").innerHTML = "Geolocation supported.";
} else {
docment.getElementById("support").innerHTML = "Geolocation is not supported in your browser.";
}
}
2、位置请求
有两种类型的位置要求
单次请求函数:
void getCurrentPosition(in PositionCallback successCallback,
in optional PositionErrorCallback errorCallback,
in optional PositionOptions options);
分析一下这个核心函数。
这个函数通过navigator.geolocation对象调用。这个函数有一个必选参数和两个可选参数。
- 必选参数successCallback为浏览器指明位置数据可用时应调用的函数。因为查位置可能需要很长时间,所以采用回调函数的方式。该函数只有一个参数:位置对象(假设命名为position)。对象包含坐标信息(coords)和一个获取数据时的时间戳(timestamp)。
position.coords |
position.timestamp |
坐标信息(coords)包含三个特性:
latitude(纬度)、longitude(经度)、accuracy(准确度)
accuracy准确度以m为单位指定经纬度与实际位置间的差距,置信度为95%。
根据硬件设备的不同,坐标信息还可能提供如下特性:
altitude:用户位置的海拔高度,以m为单位;
altitudeAccuracy:海拔高度的准确度,以m为单位。
heading:行进方向,相对于正北而言;
speed:地面速度,以m/s为单位。
- 可选参数errorCallback是发生错误时的回调函数。虽然是可选参数,但建议选用。
该函数有一个参数:错误对象(error)。错误对象有两个属性,code和message。
code对应3个值
编号值 |
常量 |
说明 |
1 |
PERMISSION_DENIED |
用户选择拒绝浏览器获取其位置信息 |
2 |
POSITION_UNAVAILABLE |
尝试获取用户位置数据,但失败了 |
3 |
TIMEOUT |
获取用户位置时超时(如果设置了可选的timeout值) |
- 可选参数options对象可以调整HTML5 Geolocation服务的数据收集方式。
现在有三个可选参数,使用JSON对象传递({参数1:值1,参数2:值2,参数3:值3})。他们是:
enableHightAccuracy:如果启用这个参数,则通知浏览器启用HTML5 Geolocation服务的高精确度模式。参数默认值为false。如果启用此参数,可能没有任何差别,也可能会导致机器花费更多的时间和资源来确定位置,所以应谨慎使用。
timeout:单位为ms,告诉浏览器计算当前位置所允许的最长时间。其默认值为Infinity,即无穷大或无限制。
maximumAge:表示浏览器重新计算位置的时间间隔。单位是ms。默认值为零,这意味着浏览器每次请求时必须立即重新计算位置。
重复更新函数:
var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, options);
只要用户位置发生变化,Geolocation服务就会调用successCallback处理程序。它的效果就像程序在监视用户的位置,并会在其变化时及时通知用户一样。
关闭更新需要调用
navigator.geolocation.clearWatch(watchId);
3、使用HTML5 Geolocation构建应用
一个重要的计算距离的公式,Haversine公式:
Number.prototype.toRadians = function() {
return this * Matn.PI / 180;
}
function distance(latitude1, longitude1, latitude2, longitude2) {
var R = 6371;
var deltaLatitude = (latitude2 - latitude1).toRadians();
var deltaLongitude = (longitude2 - longitude1).toRadians();
latitude1 = latitude1.toRadians();
latitude2 = latitude2.toRadians();
var a = Math.sin(deltaLatitude/2) * Math.sin(deltaLatitude/2) +
Math.cos(latitude1) * Math.cos(latitude2) *
Math.sin(deltaLongitude/2) * Math.sin(deltaLongitude/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
return d;
}
- 大小: 19.9 KB
分享到:
相关推荐
前端项目-jQuery-Geolocation,jQuery plugin which acts as a simplification of the W3C Geolocation API
Api-il-ilce-mahalle-geolocation-rest-api.zip,蒂尔基耶伊桑,伊尔塞姆特维拉班。Bélgesel Bilgiler_l,_l_e,Bélge ve Mahalle Bilgisi_in rest-API,一个api可以被认为是多个软件设备之间通信的指导手册。例如,...
rn-background-geolocation-demo, 针对本机背景地理定位插件的演示应用程序 [Demo App ] react-native-background-geolocation全功能,反应本机演示应用程序的反应本地背景地理定位模块。 安装$ git clone ...
您需要具有访问Google Maps Geolocation API的Google API密钥。 例子 const geolocation = require ( 'google-geolocation' ) ( { key : 'api key' } ) ; // Configure API parameters const params = { ...
Geolocation API扩展了。 当前,在Android上,它使用 。 Google不推荐使用此API,因为它不如推荐的准确和慢。 这是我们希望在不久的将来更改的内容 。 为了将新的与React Native一起使用,请查看替代库: 入门 ...
PhoneGap,API帮助文档翻译整理9-Geolocation_(定位)
创建此库是为了尝试使用react-native的Geolocation API当前实现修复android上的位置超时问题。 该库尝试使用Google Play服务的新FusedLocationProviderClient API解决此问题,相对于Android的默认框架位置API,...
react-native-background-geolocation_gradle3 使用Gradle 3对项目进行react-native-background-geolocation的临时解决方法安装yarn add ...-native link react-native-mauron85-background-geolocation 用法参见信用...
Js-geolocation 是一个 Go 开发的,使用谷歌服务的客户端地理位置服务。地理位置数据库是由 Google 维护,非常可靠。{ "city":"cluj-napoca", "cityLatLong":{ "lat":46.777248, "long":23.59989 }, ...
React Native高德地图定位模块,支持Android + iOS,提供完善的原生接口,同时提供符合Web标准的Geolocation API。 用法 import { PermissionsAndroid } from "react-native" ; import { init , Geolocation } from...
21 - Geolocation.rar
cordova-background-geolocation-services, Android和iOS的背景定位 cordova-background-geolocation-servicesAndroid和iOS的background 地理定位,纯javascript回调。注意:如果有人有兴趣,这个插件需要一个维护...
Laravel开发-geolocation 连接到IP信息数据库服务的Laravel包
MapNav-Geolocation Toolkit 1.5.0 插件为最新版。是Unity 地理定位功能开发的必选插件。功能包括2D/3D对象地理定位,GPS导航和在线地图。只要你厉害,试试用这个开发个自己的轻量级 “高德地图”的App。
安装使用npm : npm install --save react-hook-geolocation 使用yarn : yarn add react-hook-geolocation用法 import React from 'react'import useGeolocation from 'react-hook-geolocation'const ...
Unity地理定位工具MapNav - Geolocation Toolkit v1.3.1
该插件的是使用运动检测API(使用加速计,陀螺仪和磁力计)来检测设备何时处于移动和静止状态。 当检测到设备正在移动时,插件将根据配置的distanceFilter (米)自动开始记录位置。 当检测到设备处于静止状态时,...
ios端是基于cordova-plugin-geolocation稳定版本1.0.0而来,内部调用的是苹果系统自带的定位sdk 安卓端是基于高德定位封装而来,高德sdk为AMap_Location_V4.3.0_20181016.jar 软件开发设计:PHP、QT、应用软件开发、...
[演示应用]适用于的功能齐全的React Native演示应用程序安装 git clone ... react-native run-android react-native run-ios :warning: 如果遇到iOS构建错误,通常可以解决此问题: cd ios rm Podfile.lock pod install...
kirby-geolocation-field, Kirby 2地理定位面板 2的地理定位这是一个定制的 Kirby域,它添加了一个带有拖拽标记的googlemaps 。 将标记位置保存到输入字段。 地理编码器用于搜索地址项。安装下载文件并将它们放在名...