1. 程式人生 > >關於通過高德js-api獲取定位在iPhone和Android手機上不同的表現

關於通過高德js-api獲取定位在iPhone和Android手機上不同的表現

開發了一個工單系統,其中有幾處需要上傳手機的當前經緯度,程式碼不復雜,直接引用了高德lbs服務的js-api介面,前端程式碼參考:


                <div id="map2" class="map"></div>

                <script type="text/javascript">
                    var map = new AMap.Map('map2', {
                        resizeEnable: true
                    });
                    AMap.plugin('AMap.Geolocation', function () {
                        var geolocation = new AMap.Geolocation({
                            enableHighAccuracy: true,//是否使用高精度定位,預設:true
                            timeout: 10000,          //超過10秒後停止定位,預設:5s
                            buttonPosition: 'RB',    //定位按鈕的停靠位置
                            buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設定的停靠位置的偏移量,預設:Pixel(10, 20)
                            zoomToAccuracy: true,   //定位成功後是否自動調整地圖視野到定位點
                        });

                        //使用遠端定位,見 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) {
                        console.info(data.position);
                        document.getElementById("fixLoc").value = 'GEOMETRYCOLLECTION(POINT(' +
                                data.position.lat + ' ' + data.position.lng + '))';

                        document.getElementById('status').innerHTML = '定位成功'
                        var str = [];
                        str.push('定位結果:' + data.position);
                        str.push('定位類別:' + data.location_type);
                        if (data.accuracy) {
                            str.push('精度:' + data.accuracy + ' 米');
                        }//如為IP精確定位結果則沒有精度資訊
                        str.push('是否經過偏移:' + (data.isConverted ? '是' : '否'));
                        document.getElementById('result').innerHTML = str.join('<br>');
                    }

                    //解析定位錯誤資訊
                    function onError(data) {
                        document.getElementById('status').innerHTML = '定位失敗(用探漏座標替代)'
                        document.getElementById('result').innerHTML = '失敗原因排查資訊:' + data.message;
                    }
                </script>

釋出到企業微信中作為一個應用,在手機上進行測試到這一塊程式碼的地方,iPhone測試沒問題,會彈出隱私提示,確認後獲取當前經緯度成功:

iPhone-LBS-隱私提示
iPhone-LBS-隱私提示
iPhone-LBS-GeoLoc結果
iPhone-LBS-GeoLoc結果

在Android手機(測試型號:小米5)上測試,結果出現了geolocation permission denied提示,百度一下發現不是個例,包括高德-LBS文件上也有說明:

Android-LBS-結果
Android-LBS-結果

C)getCurrentPosition返回的message原因解析:
......
Geolocation permission denied:使用者禁用了定位許可權,需要使用者開啟裝置和瀏覽器的定位許可權,並在瀏覽器彈窗中點選“允許使用定位”選項。   
Geolocation permission denied:瀏覽器禁止了非安全域的定位請求,比如Chrome、IOS10已陸續禁止,這時候需要升級站點到HTTPS。注意Chrome不會禁止localhost等域名HTTP協議下的定位;   

【檢查應用許可權設定】檢查小米5的企業微信的定位許可權:為開啟狀態;索性把企業微信的全部許可權都開啟,測試,結果仍然:Geolocation permission denied;

【將企業微信的定位許可權先關閉-再開啟】測試結果仍然:Geolocation permission denied;

【重啟小米5手機】測試結果仍然:Geolocation permission denied;

【優化高德LBS程式碼】按照高德LBS的文件,可以加入遠端定位。加入如下程式碼後,定位速度貌似加快了,但在Android手機上結果仍然失敗,提示資訊不變:



                        //使用遠端定位,見 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);
                        };

【配置HTTPS】測試到這裡,只能從這一行文字“瀏覽器禁止了非安全域的定位請求”下手解決了,將tomcat配置https:

    <Connector port="8443" protocol="org.apache.coyote.http11.Http11NioProtocol"
               maxThreads="150" SSLEnabled="true">
        <SSLHostConfig>
            <Certificate certificateKeystoreFile="conf/localhost-rsa.jks"
						certificateKeystoreType="JKS"
						certificateKeystorePassword="tomcat123"
                         type="RSA" />
        </SSLHostConfig>
    </Connector>

將微信應用的工作臺應用主頁修改為https://...:8443/...,因為是自簽名,在PC網頁上還好,提示“不安全網頁”,在“高階”中選擇繼續瀏覽,是可以正常訪問的。在企業微信中就讓人很無語了,直接就是一個提示:

企業微信-自簽名HTTPS
企業微信-自簽名HTTPS

企業微信至於麼,我是企業微信的管理員呢~

【阿里CA證書】自簽名行不通,看來只好通過公開的CA證書機構了,阿里CA證書的費用不便宜哦,廣告度首個連結點進去,一年的費用5000起:

【還有什麼划算的解決方案】到此為止了,看來Android手機還是不好用哦~ 買起來便宜、用起來貴,國內Android生態鏈對企業可不便宜。

【臨時替代方案】在沒有跟企業微信整合的情況下,系統可以在瀏覽器中開啟登入並定位,在Android手機上目前採用此替代方案,暫且使用了~~