移动h5页面获取当前地址的经纬度

由于h5原生提供的navigator.geolocation在移动端不起作用所以要借助外部的地图插件

百度地图

在项目的index.html文件中引入js

<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=公司申请的百度地图key"></script> 
//在需要获取定位的页面
const BMapGeolocation = new (window as any).BMap.Geolocation();
     BMapGeolocation.enableSDKLocation();
     BMapGeolocation.getCurrentPosition((r: any) => {
       console.log(r);
       setLaAndLong({
         departLongitude: r?.longitude,
         departLatitude: r?.latitude,
       });
     });
     }

这个方法在pc浏览器会弹出一个获取当前位置的确认弹框，点击确定就可以获取位置信息
但是放到手机上，安卓是弹框拿信息，ios手机没有弹框也没有位置信息，并且定位的位置偏差较大

腾讯地图 参考腾讯地图api

<script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=腾讯地图key&referer=项目名"></script>
let geolocation = new (window as any).qq.maps.Geolocation('腾讯地图key', '项目名');
      geolocation.getIpLocation(
        (res: ObjectType) => {
          setLaAndLong({
            departLongitude: res?.lng,
            departLatitude: res?.lat,
          });
        },
        () => {
          Toast.show({
            content: '获取经纬度失败',
            duration: 3000,
          });
        },
        { timeout: 1000 }
      );

getIpLocation，ios和安卓都可以获取经纬度，但是也有偏差，如果你的测试环境是https协议的话(备案过的域名)，可以换成geolocation.getLocation

引入JSSDK微信api

参考文档1
参考文档2
移动端h5在手机上调试安装 npm install vconsole --save
在需要调试的页面引入

import VConsole from 'vconsole';
const vConsole = new VConsole({ theme: 'dark' });
全局引入js
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" ></script>