微信小程序 webview 定位 并返回

Position - Web API | MDN WEB定位API文档地址

引入wx-jsdk

html 复制代码
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

返回小程序操作

javascript 复制代码
let path = "/pages/home/back";
jWeixin.miniProgram.redirectTo({url:path })

HTML页面代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB定位</title>
    <!-- cdn 引入 -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>
<body>
    <div class="mapinfo"></div>
    <div class="xiedai">携带信息:</div>
    <div class="fanhui">返回</div>
    <script>
        if (navigator.geolocation) {
                // 解析网页携带参数 code
                var code = location.search.split('=')[1] || '无';
                console.log(code);
                // alert( ' 浏览器支持 geolocation ' );
                // navigator.geolocation.getCurrentPosition(success, error, options);
                navigator.geolocation.getCurrentPosition(function(position){
                    console.log(position);
                    var lat = position.coords.latitude; // 纬度
                    var lng = position.coords.longitude; // 经度
                    var alt = position.coords.altitude; // 海拔
                    var acc = position.coords.accuracy; // 精度
                    var spd = position.coords.speed; // 速度
                    var hdg = position.coords.heading; // 方向
                    var tms = position.timestamp; // 时间戳
                    console.log(lat,lng,alt,acc,spd,hdg,tms);
                    mapinfo = document.querySelector('.mapinfo');
                    mapinfo.innerHTML = `
                        <p>纬度:${lat}</p>
                        <p>经度:${lng}</p>
                        <p>海拔:${alt}</p>
                        <p>精度:${acc}</p>
                        <p>速度:${spd}</p>
                        <p>方向:${hdg}</p>
                        <p>时间戳:${tms}</p>
                        支持
                    `;
                    // 携带信息
                    var xiedai = document.querySelector('.xiedai');
                    xiedai.innerHTML = `
                        携带信息:${code}
                    `;
                },function(err){
                    console.log(err); 
                },{
                    enableHighAccuracy: true, // 高精度
                    timeout: 5000, // 超时
                    maximumAge: 0 // 最大时间 
                })
        }else{
                mapinfo = document.querySelector('.mapinfo');
                    mapinfo.innerHTML = `
                        不支持
                    `;
                // 携带信息
                var xiedai = document.querySelector('.xiedai');
                    xiedai.innerHTML = `
                        携带信息:${code}
                    `;
        }
        // 返回
        var fanhui = document.querySelector('.fanhui');
        fanhui.onclick = function(){
            jWeixin.miniProgram.redirectTo({url: '/pages/home/index'})
        }
    </script>
</body>
</html>

HTTPS

协议说明:IOS 内核 浏览器 强制需要HTTPS安全协议支持、否则不通过。

浏览器兼容性

相关推荐
李纲明8 小时前
微信小程序团课临开课才取消或空位没人补:先核取消时限与自动释放,再查候补确认与预扣回滚
微信小程序·devdiy·团课预约·取消时限·空位释放·候补确认·预扣回滚
用户0341876713818 小时前
用秒哒做了个拍照识餐小程序,上线两周踩的 4 个坑
微信小程序
李纲明20 小时前
微信小程序租赁归还说本来就坏或配件对不上:先核借还点验与随单存证,再查差异计价公示
微信小程序·devdiy·租赁点验·借还拍照·随单存证·差异计价·押金释放
李纲明2 天前
微信小程序次卡跨店对不上账或前台随手改余次:先核流水只增不改与统一日切,再查冲正权限与总部只读
微信小程序·devdiy·核销流水·跨店次卡·日切对账·冲正权限·总部只读
李纲明2 天前
微信小程序维修拆机后口头加价或未确认就开工:先核验机快照与报价确认,再查补充报价与取机核验
微信小程序·devdiy·维修验机·报价确认·报价快照·补充报价·取机核验
wx1qq1com2 天前
一桩带几台车:共享租赁桩位配比、取电与结算闭环设计
物联网·微信小程序·小程序
李纲明2 天前
微信小程序场地长租月底对不上或口头占场撞场:先核合约预约与核销流水出账,再查附加费与转租归属
微信小程序·devdiy·场地长租·月结账单·核销流水·附加费·转租归属
2401_879692512 天前
微信小程序照相与摄像功能实现——chooseImage 与 chooseVideo 详解
微信小程序·小程序·notepad++
律宏阔3 天前
微信小程序 + Taro + TDesign 去掉 [&&&],让普通 Tailwind 类接管局部样式
前端·微信小程序·taro
律宏阔3 天前
微信小程序 + Taro + 多语言实现与国际化检查实录
前端·微信小程序·taro