由于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>
