升級 iOS10 後 http 網頁定位失效解決方案
本文作者鍾宇飛，來自滴滴出行公共前端團隊
最近我們在做項目時遇到這樣一個新問題，用戶在升級 iOS10 後，在 http 下使用 geolocation api 會報錯，控制台輸出 [blocked] Access to geolocation was blocked over insecure connection to http://www.xxx.com。原來是 iOS10 下的 Safari 不再支持 http 網頁里調用 geolocation 了。如此，我們之前在 http 下使用 geolocation api 的應用就無法正常使用，怎麼解決呢？
一勞永逸：全站切換 https
iOS10 下的 http 網頁禁止了 geolocation api 的調用，原因就是出於安全考慮，這時只要升級到 https 協議即可正常使用 geolocation api 。這是最推薦的解決方案，因為從大趨勢看，眾多瀏覽器廠商都在開始紛紛禁止 http 下調用 geolocation ，所以為了一勞永逸地避免無法定位的問題，建議全站切換 https 。
但是我們有的應用並不能立即切換到 https，且仍需要兼容 http 下的使用，那這個時候怎麼辦呢？
兼容方案：藉助地圖廠商 api
目前可以用各大地圖廠商（如騰訊地圖、百度地圖、谷歌地圖）提供的 api 來幫助我們解決這個問題。
下面我們來詳細了解一下各個地圖的定位服務調用方式：
騰訊地圖
引入騰訊地圖前端定位組件
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>n
調用api
var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");nngeolocation.getLocation(showPosition, showErr);nnfunction showPosition(result) {n console.log(您的位置：+ result.lng + , + result.lat );n};n nfunction showErr(err) {n console.log(err)n};n
百度地圖
引入百度地圖（百度地圖不像騰訊地圖單獨有一個定位組件，所以需要引入整個地圖的 js-sdk）
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>n
調用 api
var geolocation = new BMap.Geolocation();ngeolocation.getCurrentPosition(function(result){n if(this.getStatus() == window.BMAP_STATUS_SUCCESS){n console.log(您的位置： + result.point.lng + , + result.point.lat );n } else {n console.log(failed:+this.getStatus());n } n},{enableHighAccuracy: true})n
高德地圖
引入高德地圖（也是要進入整個 js-sdk，由於高德是採用 plugin 的形式調用定位功能，所以需要預先把地圖 DOM 載入進頁面中。）
<head>n <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script>n</head>n<body>n <div id="container"></div>n</body>n
調用 api
var map, geolocation;n //載入地圖，調用瀏覽器定位服務n map = new AMap.Map(container, {n resizeEnable: truen });n map.plugin(AMap.Geolocation, function() {n geolocation = new AMap.Geolocation();n geolocation.getCurrentPosition();n AMap.event.addListener(geolocation, complete, onComplete);//返回定位信息n AMap.event.addListener(geolocation, error, onError); //返回定位出錯信息n });n //解析定位結果n function onComplete(data) {n console.log(您的位置： + result.position.lng + , + result.position.lat );n }n //解析定位錯誤信息n function onError(error) {n console.log(error)n }n
四種定位方式返回的數據區別
從上述介紹中我們發現，各大地圖的調用方式和返回格式都不同，針對這個問題，我自己寫了一個工具geo-for-http，提供騰訊地圖、百度地圖、高德地圖的定位服務替代原生HTML5失效的定位功能，幫助你在 iOS10 下的http能正常使用定位。
整體的設計思路就是：
三個統一：統一註冊方式、統一調用方式、統一數據返回格式。
具體使用方式請戳下面鏈接，歡迎吐槽提意見~
傳送門：zyf394/geo-for-http
推薦閱讀：