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

侧重:本文探索了 http 协议下,pc + 移动端定位解决方案

IOS版本: ios14

原生Geolocation 接口:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <p><button onclick="geoFindMe()">Show my location</button></p>
    <div id="out"></div>
    <div id="msg"></div>

    <script>
        function geoFindMe() {
            var output = document.getElementById("out");
            var msg = document.getElementById("msg");

            if (!navigator.geolocation) {
                output.innerHTML = "<p>您的浏览器不支持地理位置</p>";
                return;
            } else {
                msg.innerHTML = "<p>支持地理位置</p>";
                // Register for location changes
                var watchId = navigator.geolocation.getCurrentPosition(scrollMap, handleError);

                function scrollMap(position) {
                    latitude = position.coords.latitude;
                    longitude = position.coords.longitude;
                    console.log(latitude, longitude)
                    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
                    // Scroll the map to center position
                }

                function handleError(error) {
                    console.log("error:start-->", error, "<--end")
                }
            }
        }
    </script>

</body>

</html>

MDN上标注:

Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

--  link

实际应用时,测试条件下,本地端口localhost:5000/dist,

power by tomcat

  • 火狐浏览器: 支持;
  • edge浏览器:支持;
  • ie11 :不支持
  • google chrome:不支持
  • google chrome + vpn:支持
  • ios13 safari : 不支持
  • 华为自带浏览器:不支持
  • 云之家内嵌浏览器:不支持

原生定位接口,是基于浏览器定位,会首先优先考虑返回值速度,从而基于IP 或者 WIFI 定位,对于有GPS支持的设备,会消耗更长的时间,定位依赖于浏览器,所以兼容性存在不同

地图厂家公开的接口做了封装处理,使之兼容性增强,目前测试来看,百度相比较高德地图在移动端做的兼容性更好。

在开发“获取当前位置”的需求时,使用高德就遇到了浏览器支持,移动端安卓,ios都不支持的情况。 百度到的信息极少。 但也有少数几篇文章遇到了同样的问题:

https://www.cnblogs.com/qingpw/p/13048286.html

我的解决方式是先使用高德去尝试获取定位信息,获取不到就用百度的api。 由于公司有和金蝶云之家合作,云之家的移动定位做的还是比较稳定的,所以我补了一个云之家的定位(仅支持从云之家内调用)

    INIT_TEST() {
      let _this = this;
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位,默认:true
          enableHighAccuracy: true,
          // 设置定位超时时间,默认:无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: "lb",
        });

        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            console.log("resultresultresultresult", result);
            onComplete(result);
            console.log("gaode");
            _this.map.setZoomAndCenter(13, [
              result.position.lng,
              result.position.lat,
            ]);
          } else {
            _this.lib_getPosition();
          }
        });

        function onComplete(data) {
          // data是具体的定位信息
        }

        function one rror(data) {
          // 定位出错
        }
      });
    },

    lib_getPosition() {
      let _this = this;
      var BMapGeolocation = new BMap.Geolocation();
      BMapGeolocation.getCurrentPosition(function (r) {
        if (r.latitude && r.longitude) {
          console.log("baidu");
          _this.InitPosition.latitude = r.latitude;
          _this.InitPosition.longitude = r.longitude;
          _this.map.setZoomAndCenter(13, [
            r.longitude,
            r.latitude,
          ]);
          // console.log(_this.InitPosition);
        } else {
          getQingJsAPI();
        }

        function getQingJsAPI() {
          console.log("qingjs");
          qing.call("getLocation", {
            success: function (result) {
              _this.InitPosition.latitude = result.data.latitude;
              _this.InitPosition.longitude = result.data.longitude;
              _this.map.setZoomAndCenter(13, [
                result.data.longitude,
                result.data.latitude,
              ]);
              // console.log(_this.InitPosition);
            },
          });
        }
      });
    },

先用高德去尝试定位,获取不到 ? 百度定位 ?(一般都能获取到了),还不行? 用云之家 !

实际上,从代码效率上考虑,应该判断设备,去应用不同的api可能效率更高一些。

https://www.it610.com/article/1289243065399189504.htm

上一篇:【GIS】Cesium坐标


下一篇:MySQL之根据经纬度查询多少公里范围内的数据