Mobile web pages sometimes need to use the positioning function, and the positioning request of modern browsers requires the site to be upgraded to HTTPS to ensure the success rate and accuracy. If your site is not HTTPS, you can use the geographic location interface of the WeChat official account.

1. Create a public account

Log in to your official account, click [Interface Permissions] to check whether you have obtained relevant permissions
insert image description here

2. Bind domain name

Click [Official Account Settings] - [Function Settings] - [JS Interface Security Domain Name] to bind a security domain name. The security domain name precautions are as follows:
insert image description here

3. Import JS files

Install via CDN (supports https)

http://res.wx.qq.com/open/js/jweixin-1.6.0.js

If you need to further improve service stability, when the above resources are inaccessible, you can change access to:

http://res2.wx.qq.com/open/js/jweixin-1.6.0.js

Install via NPM

npm install weixin-js-sdk

4. Inject authority verification configuration through config interface

wx.config({
    
    
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的 JS 接口列表
});

The parameters are all returned through the backend interface, and the signature algorithm is shown in Appendix 1 of the official website

5. Handle successful verification through the ready interface

wx.ready(function(){
    
    
  // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，
  // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。
  // 对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
});

6. Get the geographic location interface

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; // 位置精度
  }
});

actual case

project usevue + ts

async function handleGetLocation(index: number) {
    
    
  // 调用接口返回 config
  const {
    
     code, data } = await getConfigApi()
  if (code === 200) {
    
    
    wx.config({
    
    
      debug: false, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: data.appId, //必填，公众号的唯一标识
      timestamp: data.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.nonceStr, //必填，生成签名的随机串
      signature: data.signature,// 必填，签名，见附录1
      jsApiList: ["getLocation"] //必填，需要使用的JS接口列表，所有JS接口列表 见附录2
    });
    // 注入配置信息
    wx.ready(() => {
    
    
      // 判断当前客户端版本是否支持指定 JS 接口
      wx.checkJsApi({
    
    
        jsApiList: ['getLocation'],
        success: function (res: any) {
    
    
          // 以键值对的形式返回，可用的api值true，不可用为false
          // 如：{"checkResult":{"getLocation":true},"errMsg":"checkJsApi:ok"}
          if (res.checkResult.getLocation == false) {
    
    
            alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
            return;
          }
        }
      });
      wx.getLocation({
    
    
        type: 'wgs84',
        success: (res: any) => {
    
    
          console.log(`${
      
      res.longitude},${
      
      res.latitude}`)
        },
        cancel: function (res: any) {
    
    
          alert('用户拒绝授权获取地理位置');
        }
      });
    })
    wx.error(function (err: any) {
    
    
      console.log('err', err);
    });
  }
}

Note: The interface cannot be called on the development server and needs to be used on the official server.

WeChat official account to obtain positioning