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等方法雷同