作者:滴滴公共前端团队 – 水乙
最近我们在做项目时遇到这样一个新问题,用户在升级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.lat | result.lng |
百度 | result.point.lat | result.point.lng |
高德 | result.position.lat | result.position.lng |
HTML5 | result.coords.latitude | result.coords.longitude |
整合方案
从上述介绍中我们发现,各大地图的调用方式和返回格式都不同,针对这个问题,我自己写了一个工具geo-for-http
,提供腾讯地图、百度地图、高德地图的定位服务替代原生HTML5失效的定位功能,帮助你在 iOS10 下的http能正常使用定位。
整体的设计思路就是:
三个统一:统一注册方式、统一调用方式、统一数据返回格式。
具体使用方式请戳下面链接,欢迎吐槽提意见~
欢迎关注DDFE
GITHUB:github.com/DDFE
微信公众号:微信搜索公众号“DDFE”或扫描下面的二维码