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

2023年3月7日 393次阅读 来源: HTTP

作者：滴滴公共前端团队 – 水乙

最近我们在做项目时遇到这样一个新问题，用户在升级iOS 10后，在 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)
    }复制代码

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

地图返回纬度返回经度
腾讯result.latresult.lng
百度result.point.latresult.point.lng
高德result.position.latresult.position.lng
HTML5result.coords.latituderesult.coords.longitude

整合方案

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

整体的设计思路就是：

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

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

传送门：github.com/zyf394/geo-…

欢迎关注DDFE
GITHUB：github.com/DDFE
微信公众号：微信搜索公众号“DDFE”或扫描下面的二维码

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

    原文作者：HTTP
    原文地址: https://juejin.im/post/584a8fb72f301e00571ecc8b
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞