html5 的地理定位返回的应该都是 GPS 坐标, 即 WGS-84 坐标, 参见 Map Types - Google Maps JavaScript API v3
本文使用的是 Chrome 浏览器, 经纬度是由 Google 返回的, 使用的坐标是 WGS-84, 而高德使用的是火星坐标系(GCJ-02), 本文中没有将 WGS-84 转换为
GCJ-02 就直接去查询了, 查询结果是有偏差的. 在原文的评论中, 有些博友也提到了这个问题.
这里有一篇文章: 利用 HTML5 定位功能, 实现在百度地图上定位, 才是正确的, 在手机上测试(用微信内置浏览器打开), 无论使用 Wi-Fi 还是移动 4G 联网,
定位精度都是蛮高的, 误差在几十米内.
要想获取地理位置, 分成两步, 先获取经纬度, 这是 html5 的新功能, 具体实现各个浏览器自己想办法, 比如 Chrome 和 Firefox 就是用的 google 的位置服务, 对于 Firefox,
参见 Firefox geolocation 说明文档 https://www.mozilla.org/zh-CN/firefox/geolocation/ , 对于手机 QQ 浏览器, 通过抓包, 发现它访问的是腾讯自己的服务器. 另外, 高德地图, 百度地图, 在没有开 GPS 的情况下, 都能实现比较
准确的定位(手机端和电脑端). 拿到了经纬度, 再调用经纬度转地理位置的接口(html5 没有这个标准),
- navigator.geolocation.getCurrentPosition(geo_success, geo_error);
- function geo_success(position) {
- console.log(position.coords.latitude, position.coords.longitude);
- }
- function geo_error(msg) {
- console.log(msg.code, msg.message);
- }
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
- <title>
- 地图显示
- </title>
- <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.CSS?v=1.0"
- />
- <script src="http://webapi.amap.com/maps?v=1.3&key = 您申请的 key 值">
- </script>
- </head>
- <body>
- <div id="mapContainer">
- </div>
- <script>
- navigator.geolocation.getCurrentPosition(geo_success, geo_error);
- function geo_success(position) {
- var map = new AMap.Map('mapContainer', {
- // 设置中心点
- center: [position.coords.longitude, position.coords.latitude],
- // 设置缩放级别
- zoom: 13
- });
- var marker = new AMap.Marker({
- // 复杂图标
- icon: new AMap.Icon({
- // 图标大小
- size: new AMap.Size(28, 37),
- // 大图地址
- image: "http://webapi.amap.com/images/custom_a_j.png",
- imageOffset: new AMap.Pixel( - 28, 0)
- }),
- // 在地图上添加点
- position: [position.coords.longitude, position.coords.latitude]
- });
- marker.setMap(map);
- }
- function geo_error(msg) {
- console.log(msg.code, msg.message);
- }
- </script>
- </body>
- </HTML>
- navigator.geolocation.getCurrentPosition(locationSuccess, locationError, {
- // 指示浏览器获取高精度的位置, 默认为 false
- enableHighAcuracy: true,
- // 指定获取地理位置的超时时间, 默认不限时, 单位为毫秒
- timeout: 5000,
- // 最长有效期, 在重复获取地理位置时, 此参数指定多久再次获取位置.
- maximumAge: 3000
- });
- var watchId = navigator.geolocation.watchPosition(geo_success, geo_error);
- clearWatch(watchId);
- Geolocation http://www.geolocation.com/
- How HTML5 Geolocation Feature Works?
来源: https://www.cnblogs.com/ajianbeyourself/p/5295274.html