Ionic2使用百度地图和html5 geolocation的一些注意事项

1、完美解决window.navigator.geolocation.getCurrentPosition,在IOS10系统中无法定位问题

目前由于许多用户都将电话升级到了IOS系统,苹果的iOS 10已经正式对外推送,相信很多用户已经更新到了最新的系统。然而,如果web站没有及时支持https协议的话,当很多用户在iOS 10下访问很多网站时,会发现都无法进行正常精确定位,导致部分网站的周边推荐服务无法正常使用。为何在iOS 10下无法获取当前位置信息?这是因为在iOS 10中,苹果对webkit定位权限进行了修改,所有定位请求的页面必须是https协议的。如果是非https网页,在http协议下通过html5原生定位接口会返回错误,也就是无法正常定位到用户的具体位置,而已经支持https的网站则不会受影响。

目前提供的解决方案:
1、将网站的http设置为Https。
2、通过第三方解决,也就是调用百度地图或者其他地图的定位功能进行定位。调用百度地图方法如下:

//获取本机的地址
let geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition((position)=>{
    //0代表调用成功,具体状态可见百度地图api
    if(geolocation.getStatus() == 0){
        //经度
        let longitude =position.longitude;
        //纬度
        let latitude = position.latitude;
        let pPoint = new BMap.Point(longitude,latitude);
        let heading = 0;
        if(position.heading !=null && position.heading != ''){
            heading = position.heading;
        }
        let icon = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, {
            scale: 2,
            strokeWeight: 1,
            rotation: heading,//顺时针旋转30度
            fillColor: '#1794f6',
            fillOpacity: 0.8
        });

    }else {
        console.log(position);
    }

2、Ionic2的组件使用百度地图、百度地图矢量的方法

Ionic2使用百度地图或者其他地图时除了在index.html引入js外,还需要在相应需要使用的ts文件上加上声明:

declare var BMap;
declare var BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW;

同理,如果需要使用到百度地图的矢量,也要加上声明,如上。

如果多个组件使用到的话,可以在declarations.d.ts文件上全局声明。
引入其他js如echart.js等方法雷同

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值