移动h5使用wx.getLocation获取精确定位qq地图

最新推荐文章于 2024-06-16 18:09:06 发布

Yz前端知识

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量755

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_45168167/article/details/131055938

版权

引入qq地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <link rel ="shortcut icon" type="image/x-icon" href="./lsh.jpg">
    <!-- <script src="https://www.h5anli.com/demo/hammerjs/js/hammer.min.js"></script> -->
    <title>应用中心</title>
    <script src="/lshextension/set.js"></script>
    <script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>//qq地图
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=xxxxx"></script>//注册qq地图放入注册的key
</head>

//methods
Http.sys.sign({url: location.href.split('#')[0]}).then((res) => {//这里是通过后端接口请求返回的
        if (res.obj && res.code === "success") {
        const Vo = res.obj
        wx.config({
          debug: false,
          appId: Vo.appId, // 必填，企业微信的corpID
          timestamp: Vo.timestamp, // 必填，生成签名的时间戳
          nonceStr: Vo.noncestr, // 必填，生成签名的随机串
          signature: Vo.sign,// 必填，签名，见 附录-JS-SDK使用权限签名算法
          jsApiList: ['getLocation'],
        });
        wx.ready(function () {
          wx.getLocation({
          type: 'gcj02', //返回可以用于wx.openLocation的经纬度
          success: function (res) {
            console.info(res, 124)
            // 获取经纬度
            var latLng = new qq.maps.LatLng(res.latitude, res.longitude)
            getAddr.getAddress(latLng)
          },
          cancel: function (res) {
            that.$toast('用户拒绝授权获取地理位置')
          }
          })
        })
        wx.error(function (res) {
          console.log('微信js-sdk 配置失败000' + res.errMsg)
        })
        // 调取腾讯地图
        var getAddr = new qq.maps.Geocoder({
        complete: function (res) {
          var allAddress = res.detail.addressComponents
          //var address = res.detail.address

          // console.log('地址：', address, allAddress.province, allAddress.city, allAddress.district)
          if(allAddress.province == allAddress.city){
            that.addressData = allAddress.province+ allAddress.district
          } else {
            that.addressData = allAddress.province + allAddress.city + allAddress.district
          }

          let params = {
            channel: 'ELECTRONIC_CONTRACT_PAYMENT',
            mobile: that.mobilePhone,
            name: that.userName,
            selectAgree: num,
            answerTime: that.formatDate(new Date()),
            geographicalLocation: that.addressData
          };
          Http.privacy.externalPlatformCallback(params).then(res => {
            if (res.code == 'success') {
              that.show = false;
            }
          });


            // let params = {
            //   channel: 'ELECTRONIC_CONTRACT_PAYMENT',
            //   mobile: that.$route.query.phone,
            //   name: that.$route.query.name,
            //   selectAgree: 1,
            //   answerTime: that.formatDate(new Date()),
            //   ipAddress: address,
            // };
            // const privacyRes = Http.privacy.externalPlatformCallback(params);
            // if (res && res.code == 'success') {
            //   console.log("位置成功");
            // } else {
            //   console.log("位置失败");
            // }
          }
        })
        }
      });