admin 管理员组文章数量: 1184232
这是我尝试的第三篇博客，说实话，不太会写。前两个都太水了，内容写多了又觉得好麻烦啊，啊哈哈哈😂😂😂废话不多说，主要是最近接到的需求以及公司的业务都涉及到地图定位，然后我选择了腾讯地图的定位组件，官网提供了三种接入的方式，在腾讯地图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
各位小伙伴如果有问题可以评论或者私信我
版权声明：本文标题：使用腾讯地图定位组件不准的问题【不是ifram版，小程序也可以使用】 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1755013659a3060030.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论