升級iOS10後http網頁定位失效解決方案

時間 2019-11-16

標籤升級 ios10 ios http 網頁定位失效解決方案欄目 iOS 简体版

原文原文鏈接

做者：滴滴公共前端團隊 - 水乙javascript

最近咱們在作項目時遇到這樣一個新問題，用戶在升級iOS 10後，在 http 下使用geolocation api 會報錯，控制檯輸出 [blocked] Access to geolocation was blocked over insecure connection to http://www.xxx.com 。原來是 iOS10 下的 Safari 再也不支持 http 網頁裏調用 geolocation 了。如此，咱們以前在http下使用 geolocation api 的應用就沒法正常使用，怎麼解決呢？html

一勞永逸：全站切換https

iOS10 下的 http網頁禁止了 geolocation api 的調用，緣由就是出於安全考慮，這時只要升級到https協議便可正常使用了 geolocation api 。這是最推薦的解決方案，由於從大趨勢看，衆多瀏覽器廠商都在開始紛紛禁止 http 下調用 geolocation ，因此爲了一勞永逸地避免沒法定位的問題，建議全站切換 https 。前端

可是咱們有的應用並不能當即切換到 https，且仍須要兼容 http 下的使用，那這個時候怎麼辦呢？java

兼容方案：藉助地圖廠商api

目前能夠用各大地圖廠商（如騰訊地圖、百度地圖、谷歌地圖）提供的 api 來幫助咱們解決這個問題。git

下面咱們來詳細瞭解一下各個地圖的定位服務調用方式：github

騰訊地圖

引入騰訊地圖前端定位組件web

<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>複製代碼

調用apiapi

var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");

geolocation.getLocation(showPosition, showErr);

function showPosition(result) {
    console.log('您的位置：'+ result.lng + ',' + result.lat );
};

function showErr(err) {
    console.log(err)
};複製代碼

百度地圖

引入百度地圖（百度地圖不像騰訊地圖單獨有一個定位組件，因此須要引入整個地圖的js-sdk）瀏覽器

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>複製代碼

調用api安全

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(result){
    if(this.getStatus() == window.BMAP_STATUS_SUCCESS){
    console.log('您的位置：' + result.point.lng + ',' + result.point.lat );
    } else {
        console.log('failed:'+this.getStatus());
    }        
},{enableHighAccuracy: true})複製代碼

高德地圖

引入高德地圖（也是要進入整個js-sdk，因爲高德是採用plugin的形式調用定位功能，因此須要預先把地圖DOM加載進頁面中。）

<head>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script>
</head>
<body>
    <div id="container"></div>
</body>複製代碼

調用api

var map, geolocation;
    //加載地圖，調用瀏覽器定位服務
    map = new AMap.Map('container', {
        resizeEnable: true
    });
    map.plugin('AMap.Geolocation', function() {
        geolocation = new AMap.Geolocation();
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出錯信息
    });
    //解析定位結果
    function onComplete(data) {
        console.log('您的位置：' + result.position.lng + ',' + result.position.lat );
    }
    //解析定位錯誤信息
    function onError(error) {
        console.log(error)
    }複製代碼

四種定位方式返回的數據區別

地圖	返回緯度	返回經度
騰訊	result.lat	result.lng
百度	result.point.lat	result.point.lng
高德	result.position.lat	result.position.lng
HTML5	result.coords.latitude	result.coords.longitude