首页/Ionic/列表

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

来源:  2018-04-03 18:53:48    评论:0点击:

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

目前由于许多用户都将电话升级到了IOS系统,苹果的iOS 10已经正式对外推送,相信很多用户已经更新到了最新的系统。然而,如果web站没有及时支持https协议的话,
当很多用户在iOS 10下访问很多网站时,会发现都无法进行正常精确定位,导致部分网站的周边推荐服务无法正常使用。
为何在iOS 10下无法获取当前位置信息?这是因为在iOS10中,苹果对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等方法雷同


来源:https://blog.csdn.net/bangrenzhuce/article/details/71158853
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权