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('定位失敗');
}

就是加上針對蘋果手機的特殊處理，走遠程定位邏輯

本地測試，安卓，蘋果瀏覽器打開正常，微信當然還是不行，部署上線，微信瀏覽器正常，解決！