高德地图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.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
          );
          // 获取到定位信息的处理逻辑
          // ...
        }
      }
     })
   }

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

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐