高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed解决方案

高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed的解决方法。

前言：此坑踩得我挺难受的，搞了三天
需求：进入页面，获取用户具体经纬度并且获取当前位置信息；
问题：在PC电脑调试没问题。到移动端设备上报错Get ipLocation failed
解决方法：
思路：高德获取不到我就用 百度地图，百度获取到的编码格式跟高德不一样，需要转换，转换完在调用高德 Geocoder -- 地图解码器插件实现。

辅助函数// 百度坐标转高德（传入经度、纬度）
export function bd_decrypt(bdLng: number, bdLat: number) {const X_PI = Math.PI * 3000.0 / 180.0;const x = bdLng - 0.0065;const Y = bdLat - 0.006;const Z = Math.sqrt(x * x + Y * Y) - 0.00002 * Math.sin(Y * X_PI);const Theta = Math.atan2(Y, x) - 0.000003 * Math.cos(x * X_PI);const lng = Z * Math.cos(Theta);const lat = Z * Math.sin(Theta);return {lng, lat};
}

实现代码(vue具体函数):

 ../index.html<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=你的高德Key"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的百度Key"></script>

申请Key入口：高德：高德key ; 百度：百度Key

./SelectMap.vueprivate mounted() {// 先前使用高德获取位置及信息this.getLocationData();}
private getLocationData(): void {const AMap = (window as any).AMap;const that = this;Toast.loading({message: "加载中...",forbidClick: true,});AMap.plugin("AMap.Geolocation", () => {const geolocation = new AMap.Geolocation({enableHighAccuracy: true, // 是否使用高精度定位，默认:truetimeout: 0, // 超过10秒后停止定位，默认：无穷大maximumAge: 0, // 定位结果缓存0毫秒，默认：0noIpLocate: 0, // 是否禁止使用IP定位，默认值为0，可选值0-3  0: 可以使用IP定位    1: 手机设备禁止使用IP定位  2: PC上禁止使用IP定位  3: 所有终端禁止使用IP定位convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: false, // 显示定位按钮，默认：truebuttonPosition: "RB", // 定位按钮停靠位置，默认："LB"，左下角showMarker: false, // 定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：fextensions: "all",pName: "Geolocation",});geolocation.getCurrentPosition();AMap.event.addListener(geolocation, "complete", onComplete);AMap.event.addListener(geolocation, "error", onError);function onComplete(result) {// result是具体的定位信息console.log(result, "成功");// 获取到定位信息的处理逻辑that.center = [result.position.lng, result.position.lat];that.lng = result.position.lng;that.lat = result.position.lat;that.markers[0].position = that.center;that.address = result.formattedAddress;Toast.clear();}function onError(data) {// 定位出错console.log("高德 定位 失败 : ", data?.message);// 呼叫百度定位that.lib_getPosition();}});}/*** 百度地图获取经纬度*/private lib_getPosition() {const that = this;const BMap = (window as any).BMapGL;const BMapGeolocation = new BMap.Geolocation();BMapGeolocation.getCurrentPosition( (r) => {if (r.latitude && r.longitude) {console.log("baidu");// 获取到经纬度（百度转换高德经纬度）const {lng, lat} = bd_decrypt(r.longitude, r.latitude);that.center = [lng, lat];// 根据经纬度获取当前经纬度的位置信息that.getAdd();} else {console.log(22);}});}/*** 根据经纬度获取地址*/public getAdd() {const that = this;const AMap = (window as any).AMap;const geocoder = new AMap.Geocoder({radius: 1000,extensions: "all",});const [lng, lat] = this.center;geocoder.getAddress([lng, lat], function (status, result) {if (status === "complete" && result.info === "OK") {console.log(result, "result");if (result && result.regeocode) {console.log(`result.regeocode.formattedAddress:`,result.regeocode.formattedAddress);// 获取到定位信息的处理逻辑// ...}}})}

相关文章：高德地图api移动端定位失败解决方案 #H5 原生Geollocation接口Chomre浏览器的坑

相关文章：vue3+ts+@vuemap/vue-amap实现获取当前用户位置并解析地址信息

高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed解决方案相关推荐

高德地图H5定位，搜索列表-完整代码
换了两家公司都提上需求要做这个定位的地图,今天整理了下把整页的源代码贴出来供大家参考下!其中的不足还请大家见谅,指出改正! <!doctype html> <html> < ...
高德地图jsapi marker.markOnAMAP报错
当使用的最新jsapi2.0的时候,我们按照示例用js唤起高德地图APP时候报错 marker.markOnAMAP({name:'首开广场123',position:marker.getPositi ...
android高德地图默认当前位置,【报Bug】1.9.2 android 高德地图无法定位到当前位置...
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] 1.9.2版本 a ...
利用高德地图实现定位功能
最近学习使用高德地图可谓是出师不利....嘛,不知道为啥高德给的3d地图的jar包用不了,最后实在没办法用了2d的jar包,然后在大佬和其他资料的帮助下,实现了高德地图的定位功能.接下来就说一下具体的 ...
Android 集成高德地图——当前定位，添加图标，画路线，设置显示中心位置，比例，地图刷新位置监听，判断GPS开启，去打开GPS
/*** 判断定位服务是否开启** @param* @return true 表示开启*/ public static boolean isLocationEnabled(Context contex ...
高德地图——浏览器定位+点击获取经纬度+去除高德百度地图左下角logo
高德地图--浏览器定位+点击获取经纬度+去除高德百度地图左下角logo 1.代码 <!doctype html> <html> <head><meta cha ...
Android Studio之高德地图实现定位和3D地图显示
在应用开发中,地图开发是经常需要使用的"组件",国内比较出名的是就是百度地图和高德地图. 此博客讲的是高德地图实现定位和3D地图显示,并标注相应位置,话不多说,先看看效果,在上代码 ...
android------之高德地图实现定位和3D地图显示
2019独角兽企业重金招聘Python工程师标准>>> 在应用开发中,地图开发是经常需要使用的"组件",国内比较出名的是就是百度地图和高德地图. 此博客讲的是高德 ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...

高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed解决方案

高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed的解决方法。

高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed解决方案相关推荐

最新文章

热门文章