微信小程序 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安全协议支持、否则不通过。

浏览器兼容性

相关推荐
云起SAAS16 小时前
倒班日历助手抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·倒班日历助手
sheji341618 小时前
【开题答辩全过程】以 基于微信小程序的失物认领系统为例,包含答辩的问题和答案
微信小程序·小程序
qq_256847888618 小时前
08cms房产多城市版最新v8.7含小程序及装修网的安装及配置方法整理出来希望能帮到大家
小程序·08cms房产系统源码·08cms装饰网门户系统·08cms 房产门户系统源码
风月歌19 小时前
python项目之摄影竞赛小程序
python·mysql·小程序·毕业设计·源码
云云只是个程序马喽19 小时前
2026年短剧系统开发搭建全流程教程(小程序+APP自营/红果模式/广告联盟/海外多语言)
小程序
计算机毕设指导619 小时前
基于微信小程序的网络安全知识科普平台系统【源码文末联系】
java·spring boot·安全·web安全·微信小程序·小程序·tomcat
天***88962 天前
小程序婚纱店摄影楼预约婚庆礼展示,小程序开发定制,会员下单档期系统
小程序
说私域2 天前
开源AI智能名片链动2+1模式商城小程序下短视频电商变现与广告变现的对比研究
人工智能·小程序
天***88962 天前
美业医疗美容院小程序,预约会员管理养生馆诊所肌护肤理疗系统,附源码交付
小程序
2501_915909063 天前
手机崩溃日志导出的工程化体系,从系统级诊断到应用行为分析的多工具协同方法
android·ios·智能手机·小程序·uni-app·iphone·webview