高德地图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>
./SelectMap.vue
private 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, // 是否使用高精度定位,默认:true
timeout: 0, // 超过10秒后停止定位,默认:无穷大
maximumAge: 0, // 定位结果缓存0毫秒,默认:0
noIpLocate: 0, // 是否禁止使用IP定位,默认值为0,可选值0-3 0: 可以使用IP定位 1: 手机设备禁止使用IP定位 2: PC上禁止使用IP定位 3: 所有终端禁止使用IP定位
convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: false, // 显示定位按钮,默认:true
buttonPosition: "RB", // 定位按钮停靠位置,默认:"LB",左下角
showMarker: false, // 定位成功后在定位到的位置显示点标记,默认:true
showCircle: true, // 定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: true, // 定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:f
extensions: "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
);
// 获取到定位信息的处理逻辑
// ...
}
}
})
}