这是我尝试的第三篇博客，说实话，不太会写。前两个都太水了，内容写多了又觉得好麻烦啊，啊哈哈哈😂😂😂废话不多说，主要是最近接到的需求以及公司的业务都涉及到地图定位，然后我选择了腾讯地图的定位组件，官网提供了三种接入的方式，在腾讯地图api按下图查看

链接：https://lbs.qq.com/webApi/component/componentGuide/componentGeolocation

这里说的主要是第一种和第三种，iframe的方式不考虑，小程序使用需要校验业务域名

第一种和第三种都是引入js，但是有时候会出现定位不准的问题，解决方案需要引入其他的两个js如下

//加入以下两个js文件即可

然后在调用定位api的方法里加入以下代码，这里我封装成了hook方便调用

import { ElMessageBox } from "element-plus";

/** 获取用户位置——腾讯地图版 */

const geolocation = new (window as any).qq.maps.Geolocation('E64BZ-PZS6Z-ZKSXC-TIXJU-LNFN3-EZBFY', 'DD管养小程序');

const getPositionByTencentMap = (): Promise<{ lat: number, lng: number }> => {

return new Promise((resolve, reject) => {

geolocation.getLocation((res: any) => {

//主要是这两个方法必须有

(window as any).listener.on('common.geolocation', 'success', function (evt: any, loc: any) {

const result: any = loc.addr || loc.city;

});

//主要是这两个方法必须有

(window as any).listener.on('common.geolocation', 'fail', function () {

console.log('定位失败')

});

// console.log("定位成功", res);

resolve({ lat: res.lat, lng: res.lng })

}, (err: any) => {

console.log(err)

ElMessageBox.alert("获取定位失败", "提示", {

confirmButtonText: "确定",

center: true,

draggable: true

});

reject("定位失败")

}, { timeout: 10000 })

})

}

export default getPositionByTencentMap

部署不要用http，http在安卓微信客户端获取不到精确定位，必须申请ssl证书使用https

各位小伙伴如果有问题可以评论或者私信我