美文网首页前端
HTML地理坐标

HTML地理坐标

作者: 前白 | 来源:发表于2019-07-15 09:46 被阅读36次

1:定位基准

说到地理坐标,一定是有一个定位的基准的。在web开发的过程中,它的定位基准一共有那么几种:

第一种是IP,根据当前电脑或者是手机设备它的IP地址来确定当前的地理坐标。IP定位是通过ISP机房,也就是每一个登记的机房位置,比如小区,每一栋大楼都会有一个登记的ISP机房。如果使用IP定位的话,它大约能够精确到小区或者是大楼级别,比如一栋和二栋通过这个IP地址就能准确的区分出来。IP定位的误差大概在十几米。

第二种是GPS,GPS是基于卫星定位的,它相对来说是比较准确的,但是它需要硬件支持。比如电脑一般是不具备GPS定位功能的。它的精确度很高,如果是军方的话可以达到1米甚至以内。

第三种WIFI定位,WiFi定位是通过每一个WiFi地址的Mac地址,特别精确。如果WiFi有登记过的话,它的误差大概在一米左右。WiFi是有一个信号辐射范围的,根据辐射范围的强弱可以确定当前的设备距离这个WiFi有多远。但是它的支持性能不是太好,只能支持室内。

第四种GSM和CDMA是比较常见的,是使用手机卡来定位的,也就是基于设备的基站。比如联通的信号塔电信的信号塔,它的精确度也是比较高的,它一般是用于手机或者是通信设备。不同的信号塔会接到来自不同方位的信号,然后根据这个信号的叠加和它的强弱再来确定当前的位置,它的精确度可以达到10米左右。

最后一种是用户指定,可以手动指定当前的位置,假如当前定位不准,我们需要做一个校正指定当前的位置,最常见的就是我们平常使用打车软件时,如果自动获取的位置不准,那么我们可以通过移动来手动指定我们当前的位置。

2:获取流程

获取定位基准之后,我们需要获取当前的地理坐标,获取是有一个流程的。首先打开web应用,打开之后向浏览器请求地理信息,这时会弹出一个询问窗口,由于位置信息涉及到一个隐私,所以浏览器做了一个双重的保护,询问之后如果同意了,这时浏览器就会从设备或者受信任的服务器获取位置信息并返回。

3:浏览器兼容

browser地理坐标.png

4:获取用户当前坐标(地理坐标到底是怎么获取的)

getCurrentPosition(onSuccess,onError,options)

onSuccess是一个回调函数,options有三个值:enableHighAccuracy(高精度标识,在设备或者是服务器能达到范围内返回最高精度)、timeout(超出时间,如果在指定时间内获取不到位置信息就会返回Error,默认是0(无穷大))、maximumAge(缓存时间)。

 const getLocation = () => {
 const options = {
 enableHighAccuracy: false, 
 maximumAge: 1000
 }
 if(navigator.geolocation) {
 //浏览器支持geolocation
 navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
 } else {
 //浏览器不支持geolocation
 alert('当前浏览器不支持getLocation');
 }
}
​
//成功回调
function onSuccess(position) {
 const longitude = position.coords.longitude;
 //纬度
 const latitude = position.coords.latitude;
 console.log('position', { longitude, latitude });
}
​
//失败回调
function onError(error) {
 switch(error.code){
 case 1:
 alert("位置服务被拒绝");
 break;
 case 2:
 alert("暂时获取不到位置信息");
 break;
 case 3:
 alert("获取信息超时");
 break;
 case 4:
 alert("未知错误");
 break;
 }
}

5:持续获取用户当前位置(科学上网)

watchCurrentPosition(onSuccess, onError, options);

 let watchId = undefined;
​
 const getLocation = () => {
 const options = {
 enableHighAccuracy: false, 
 maximumAge: 1000
 }
 if(navigator.geolocation) {
 //浏览器支持geolocation
 watchId = navigator.geolocation.watchPosition(showPosition);
 } else {
 //浏览器不支持geolocation
 alert('当前浏览器不支持getLocation');
 }
}
​
function showPosition(position) {
 const longitude = position.coords.longitude;
 const latitude = position.coords.latitude;
 console.log('position', { longitude, latitude });
}
​
const cancel = () => {
 //清除当前持续获取当前位置,可以当做是一个setInterval
 if(watchId) navigator.geolocation.clearWatch(watchId);
}

6:coords

  • coords.latitude - 十进制数的纬度
  • coords.longitude - 十进制数的经度
  • coords.accuracy - 位置精度
  • coords.altitude - 海拔,海平面以上以米计
  • coords.altitudeAccuracy - 位置的海拔精度
  • coords.heading - 方向,从正北开始以度计
  • coords.speed - 速度,以米/每秒计
  • timestamp - 响应的日期/时间

相关文章

  • HTML地理坐标

    1:定位基准 说到地理坐标,一定是有一个定位的基准的。在web开发的过程中,它的定位基准一共有那么几种: 第一种是...

  • ArcGIS中的WKID

    地理坐标4214 GCS_Beijing_1954 地理坐标4326 GCS_WGS_1984 地理坐标4490 ...

  • 地图投影以及Proj4的使用

    地理坐标系统和投影坐标系统 地理坐标系统(Geographic coordinate system) :地理坐标系...

  • 地理坐标逆编码 API 接口

    地理坐标逆编码 API 接口 获取地理坐标周围的地址信息。 1. 产品功能 提供精准、高效的地理坐标逆编码接口; ...

  • GIS中坐标投影转换的问题

    GIS中坐标投影转换的问题 一、地理坐标与投影坐标的区别(考研初试复试常考题): 地理坐标:地理坐标系统(Geog...

  • 利用Python进行地理坐标系统的转换

    本文主要讲述地理坐标系统的原理以及怎么利用Python进行地理坐标系统转换,主要内容包含以下几块: 什么是地理坐标...

  • [LBS] 地理坐标系与投影坐标系

    1. 地理坐标系 地理坐标系统 是地球表面空间要素的定位参照系统。地理坐标系统是由 经度 和 纬度 定义的。 经度...

  • 中国国测局地理坐标(GCJ-02)、世界标准地理坐标(WGS-8

    YJLocationConverter 中国国测局地理坐标(GCJ-02)<火星坐标>、世界标准地理坐标(WGS-...

  • 坐标系总结

    地理坐标给定参考椭球体确定大地基准面经纬度即可确定地理坐标 投影坐标投影坐标是从地理坐标系投影过来的因此也要选择地...

  • 地理坐标

    UTM坐标转WGS84 EPSG设置[https://blog.csdn.net/weixin_52127098/...

网友评论

    本文标题:HTML地理坐标

    本文链接:https://www.haomeiwen.com/subject/oqsgkctx.html