升级iOS10后http网页定位失效解决方案

时间 2019-11-11

标签升级 ios10 ios http 网页定位失效解决方案栏目 iOS 繁體版

原文原文链接

最近咱们在作项目时遇到这样一个新问题，用户在升级 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 的应用就没法正常使用，怎么解决呢？javascript

一劳永逸：全站切换 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 加载进页面中）app

<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)
}

四种定位方式返回的数据区别

整合方案

从上述介绍中咱们发现，各大地图的调用方式和返回格式都不一样，针对这个问题，我本身写了一个工具geo-for-http，提供腾讯地图、百度地图、高德地图的定位服务替代原生HTML5失效的定位功能，帮助你在 iOS10 下的http能正常使用定位。

总体的设计思路就是：

三个统一：统一注册方式、统一调用方式、统一数据返回格式。

具体使用方式请戳下面连接，欢迎吐槽提意见~

传送门：zyf394/geo-for-http