昨天接到用戶通知說在點擊「看場地」時沒法獲取地理位置信息。javascript
在接到通知時,首先想到的是排查機型問題。因爲客戶多爲IOS用戶,因此最早看的是在安卓是有沒有此問題的發生,調查結果爲安卓沒有任何問題。再排查IOS的版本問題,結果發現沒法獲取地理位置的爲IOS10版本,而IOS9上一樣無此現象的產生。html
因此基本定位到是IOS 10版本可能對咱們如今的代碼無法兼容,沒辦法小胳膊弄不過大腿,因此咱們再定位如今的代碼是經過什麼樣的方式去獲取地理位置的。html5
結果以下:java
基本能夠肯定IOS 10可能對H5獲取地理位置的API作了限制或者有了修改,具體什麼修改還須要繼續排查。web
在網上google了一下,原來這個問題在IOS10推出就已存在,如今已經到了10.3+了咱們才暴露出來,蜜汁尷尬。。瀏覽器
具體的緣由也說的比較明白:app
在IOS 10中,蘋果對webkit定位權限進行了修改,全部定位請求的頁面必須是https協議的。若是是非https網頁,在http協議下經過html5原生定位接口會返回錯誤, 也就是沒法正常定位到用戶的具體位置,而已經支持https的網站則不會受影響。
基本網上有兩種解決方案:網站
一、將網站的http設置爲Https。google
二、經過第三方解決,即經過調用百度地圖或者騰訊地圖來獲取地理位置加密
文章連接地址 http://blog.csdn.net/for12/article/details/52803787
做者也是在使用第三方解決,可是我在使用百度API去獲取地理位置的時候發現和真實的經緯度又有所誤差,原來百度地圖對地理位置又進行了二次加密,又是一個坑,果斷放棄。
而第一個方案,升級網站爲https是個長期規劃的過程(鬼才知道有多少個坑在裏面),因此就須要找一個比較能短期解決問題的方案。
最後終於在犄角旮旯找到了基本的解決方案:採用iframe能夠繞過IOS的這一限制(可是無法繞過谷歌瀏覽器的限制)
var options = { enableHighAccuracy: true, maximumAge: 30000, timeout: 12000 } window.locationCallback = function(err, position){ if (err) { showError(err); return ; } showPosition(position); } var str = '<iframe src="javascript:(function(){ ' +'window.navigator.geolocation.getCurrentPosition(' +'function(position){parent && parent.locationCallback && parent.locationCallback(null,position);}, ' +'function(err){parent && parent.locationCallback && parent.locationCallback(err);}, ' +'{enableHighAccuracy : '+ options.enableHighAccuracy +', maximumAge : '+ options.maximumAge +', timeout :'+ options.timeout +'})' +';})()" style="display:none;"></iframe>'; $(str).appendTo('body') window.showPosition = function(position) { // TODO } window.showError = function(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; } }
不得不說谷歌和蘋果然有着挺進新標準的勇氣和果斷,或許這纔是互聯網領頭羊的氣勢吧。