升级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>

调用api

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)

}

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

整合方案

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

整体的设计思路就是：

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

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

传送门：zyf394/geo-for-http