这是我尝试的第三篇博客，说实话，不太会写。前两个都太水了，内容写多了又觉得好麻烦啊，啊哈哈哈😂😂😂废话不多说，主要是最近接到的需求以及公司的业务都涉及到地图定位，然后我选择了腾讯地图的定位组件，官网提供了三种接入的方式，在腾讯地图api按下图查看
链接：https://lbs.qq/webApi/component/componentGuide/componentGeolocation
这里说的主要是第一种和第三种，iframe的方式不考虑，小程序使用需要校验业务域名
第一种和第三种都是引入js，但是有时候会出现定位不准的问题，解决方案需要引入其他的两个js如下
<script charset="utf-8" src="https://mapapi.qq/web/mapComponents/geoLocation/v/geolocation.min.js?key=yourKey&referer=appname"></script>
//加入以下两个js文件即可
<script type="text/javascript" src="https://mapapi.qq/web/mapComponents/static/common/static/js/mod_0d3c97a.js"></script>
<script type="text/javascript" src="https://mapapi.qq/web/mapComponents/geoLocation/v2/static/geolocation/static/pkg/geolocation_libs_b115dfc.js"></script>
然后在调用定位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
各位小伙伴如果有问题可以评论或者私信我
发布者：admin，转转请注明出处：http://www.yc00.com/web/1755013649a5226115.html
评论列表（0条）