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

最近我们在做项目时遇到这样一个新问题，用户在升级 iOS10 后，在 http 下使用 geolocation api 会报错，控制台输出 [blocked] Access to geolocation was blocked over insecure connection to 。原来是 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

posted @   岁月淡忘了谁  阅读(458)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示