微信内前端H5定位方式比较

最新推荐文章于 2024-04-28 10:00:06 发布

肖无疾

最新推荐文章于 2024-04-28 10:00:06 发布

阅读量4.5k

点赞数 3

分类专栏：地图文章标签：腾讯地图定位 javascript

本文链接：https://blog.csdn.net/xcx573/article/details/112897164

版权

地图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在微信内使用定位功能，如果能借助到微信app自身的定位优势，定位才能更加精准。注意：使用定位，摄像头，声音等都需要通过https协议访问网站。

1. 使用原生接口Geolocation

var options = {
  enableHighAccuracy: true, //true为高精度，但耗电量增加
  timeout: 5000, //超时时间必填，否则默认为无穷大
  maximumAge: 0 //位置的缓存时间，默认0即不缓存
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log('Latitude : ' + crd.latitude);
  console.log('Longitude: ' + crd.longitude);
  console.log('More or less ' + crd.accuracy + ' meters.');
};

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};

navigator.geolocation.getCurrentPosition(success, error, options);

注意：这种方式只能获取wgs84的坐标，如果想在腾讯地图中显示则需要转换成火星坐标gcj02；还有一个大坑，返回的位置是`Coordinates 对象，使用JSON.stringify时返回的是空的"{}"，解决方法是JSON.stringify($.extend({},position))。`

`2.使用微信JS-SDK`获取地理位置接口

wx.getLocation({
  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
  success: function (res) {
    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
    var speed = res.speed; // 速度，以米/每秒计
    var accuracy = res.accuracy; // 位置精度
  }
});

优点是借用了微信的定位功能，定位更精准了，可以指定坐标类型了，但缺点是需要有公众号及其开发经验。

3.使用腾讯地图的前端定位组件

此组件更为强大，同样使用了微信的定位功能，但又不需要微信服务号，返回的字段更详细，还提供了IP定位，监听位置信息的改变等功能（并且微信之外也能用）。

这里需要用到开发密钥，注册地址如下：

https://lbs.qq.com?lbs_invite=RLV8FLR

先直观的来段json，展示一下有哪些字段吧：

{
    "module": "geolocation",
    "type": "cache",
    "adcode": "310101", //行政区ID，六位数字, 前两位是省，中间是市，后面两位是区
    "nation": "中国",
    "province": "上海市",
    "city": "上海市",
    "district": "黄浦区",
    "addr": "黄浦区延安高架路(大世界地铁站西北)",
    "lat": 31.228474, //火星坐标(gcj02)，腾讯、Google、高德通用
    "lng": 121.478224,
    "accuracy": 600 //误差范围，以米为单位
}

是不是一下就把前面的都比下去了。下面提供一个完整示例：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>前端定位模块</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }
        body {
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
        }
        #pos-area {
            background-color: #009DDC;
            margin-bottom: 10px;
            width: 100%;
            overflow: scroll;
            text-align: left;
            color: white;
        }
        #demo {
            padding: 8px;
            font-size: small;
        }
       #btn-area {
            height: 100px;
        }
        button {
            margin-bottom: 10px;
            padding: 12px 8px;
            width: 42%;
            border-radius: 8px;
            background-color: #009DDC;
            color: white;
        }
</style>
<script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
</head>
<body>
    <div id="pos-area">
        <p id="demo">点击下面的按钮，获得对应信息：<br /></p>
    </div>
 
    <div id="btn-area">
        <button onClick="geolocation.getLocation(showPosition, showErr, options)">获取精确定位信息</button>
        <button onClick="geolocation.getIpLocation(showPosition, showErr)">获取粗糙定位信息</button>
        <button onClick="showWatchPosition()">开始监听位置</button>
        <button onClick="showClearWatch()">停止监听位置</button>
    </div>
    <script type="text/JavaScript">
        var geolocation = new qq.maps.Geolocation("key必填，开发密钥", "referer必填，调用来源");
 
        document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px';
 
        var positionNum = 0;
        var options = {timeout: 8000};//定位的超时时间，默认值为10s
        function showPosition(position) {
            positionNum ++;
            document.getElementById("demo").innerHTML += "序号：" + positionNum;
            document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
        };
 
        function showErr() {
            positionNum ++;
            document.getElementById("demo").innerHTML += "序号：" + positionNum;
            document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失败！";
            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
        };
 
        function showWatchPosition() {
            document.getElementById("demo").innerHTML += "开始监听位置！<br /><br />";
            geolocation.watchPosition(showPosition);
            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
        };
 
        function showClearWatch() {
            geolocation.clearWatch();
            document.getElementById("demo").innerHTML += "停止监听位置！<br /><br />";
            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
        };
    </script>
</body>
</html>

总结：微信里定位就选腾讯地图吧，而且也是小程序的不二选择呀。

肖无疾

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
微信内前端H5定位方式比较

注意：使用定位，摄像头，声音等都需要通过https协议访问网站。1. 使用原生接口Geolocationvar options = { enableHighAccuracy: true, //true为高精度，但耗电量增加 timeout: 5000, //超时时间必填，否则默认为无穷大 maximumAge: 0 //位置的缓存时间，默认0即不缓存};function success(pos) { var crd = pos.coords; console.log('
复制链接

扫一扫