h5获取用户定位碰到的坑

最近接到一个h5的小项目，但是需要获取用户的定位经纬度作为接口参数，因为我一直做的后台，对这些东西都不熟悉，只有网上查找各种资料；

接下来就是各种问题了。

首先，一开始查找到html5自带的定位API，看起来特别简单，跃跃欲试，代码如下：

var lat=0,lng=0;
function getLocation() {
    var options = {

        enableHighAccuracy: true, //精确定位

        maximumAge: 1000//最长时间

    }
    if (navigator.geolocation) {
        //alert("定位开始")
        navigator.geolocation.getCurrentPosition(showPosition, showError, options);
    } else {
        alert("浏览器不支持地理定位。");
    }
}

function showError(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            alert("定位失败,用户拒绝请求地理定位");
            break;
        case error.POSITION_UNAVAILABLE:
            alert("定位失败,位置信息是不可用");
            break;
        case error.TIMEOUT:
            alert("定位失败,请求获取用户位置超时");
            break;
        case error.UNKNOWN_ERROR:
            alert("定位失败,定位系统失效");
            break;
    }
}

function showPosition(position) {
     lat = position.coords.latitude; //纬度
     lng = position.coords.longitude; //经度
     alert('纬度:' + lat + ',经度:' + lng);
}

使用之后发现微信浏览器、苹果手机定位失败。。。

了解到微信必须使用签名https域名，将本地的springboot项目改为https服务，继续测试，微信浏览器直接白屏还是不行，手机浏览器可以点击同意之后访问，微信安全校验严格，直接不显示，放弃，

继续测试将项目部署到测试服务器，https服务，应该可以了吧，是可以了，安卓手机可以，苹果不行。。。

接口方是使用高德API来定位的，避免麻烦，改为高德定位吧

首先去高德API官方网站注册账号，建应用，主要是为了申请key，可以调用高德定位API，参考地图js API；

引入js

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.2&key=youkey"></script>

youkey就是你在高德上申请的key
高德定位js代码如下，container是div容器id

var lat = 0, lng = 0;

var map, geolocation;
//加载地图，调用浏览器定位服务
map = new AMap.Map('container', {
    resizeEnable: true
});
map.plugin('AMap.Geolocation', function () {
    geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, //是否使用高精度定位，默认:true
        timeout: 10000, //超过10秒后停止定位，默认：无穷大
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        buttonPosition: 'RB'
    });
    map.addControl(geolocation);
    //询问是否允许获取地理信息
    geolocation.getCurrentPosition();
    //定位成功，返回经纬度信息
    AMap.event.addListener(geolocation, 'complete', onComplete);
    //定位失败，返回定位出错信息
    AMap.event.addListener(geolocation, 'error', onError);
});

//解析定位结果
function onComplete(data) {
    lat = data.position.getLng();
    lng = data.position.getLat();
    alert(lat);
}
//解析定位错误信息
function onError(data) {
    alert('定位失败');
}

屁颠屁颠部署上线，打开手机（安卓），完美！乐滋滋

。。。

。。。

。。。

同事打开手机（苹果），点位失败。。。

哎。

继续找资料

使用高德的补丁函数 http://a.amap.com/jsapi_demos/static/remogeo/remogeo.js 有异步的问题建议放在本地

在高德地图初始化的地方  new RemoGeoLocation()

苹果新发的 iOS 11 操作系统的一大特性是对 http 形式访问页面的限制变得非常严格

var lat = 0, lng = 0;

var map, geolocation;
//加载地图，调用浏览器定位服务
map = new AMap.Map('container', {
    resizeEnable: true
});
map.plugin('AMap.Geolocation', function () {
    geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, //是否使用高精度定位，默认:true
        timeout: 10000, //超过10秒后停止定位，默认：无穷大
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        buttonPosition: 'RB'
    });

    //判断是否是ios系统，如果是，则调用远程定位方法

    if (AMap.UA.ios) {
        //使用远程定位，见 remogeo.js
        var remoGeo = new RemoGeoLocation();
        //替换方法
        navigator.geolocation.getCurrentPosition = function () {
            return remoGeo.getCurrentPosition.apply(remoGeo, arguments);
        };
        //替换方法
        navigator.geolocation.watchPosition = function () {
            return remoGeo.watchPosition.apply(remoGeo, arguments);
        };
    }
    map.addControl(geolocation);
    //询问是否允许获取地理信息
    geolocation.getCurrentPosition();
    //定位成功，返回经纬度信息
    AMap.event.addListener(geolocation, 'complete', onComplete);
    //定位失败，返回定位出错信息
    AMap.event.addListener(geolocation, 'error', onError);
});

//解析定位结果
function onComplete(data) {
    lat = data.position.getLng();
    lng = data.position.getLat();
    alert(lat);
}
//解析定位错误信息
function onError(data) {
    alert('定位失败');
}

就是加上针对苹果手机的特殊处理，走远程定位逻辑

本地测试，安卓，苹果浏览器打开正常，微信当然还是不行，部署上线，微信浏览器正常，解决！

在我快要绝望的时候找到这个https://www.cnblogs.com/helzeo/p/11642380.html，万分感谢该作者！