React 使用高德地图在ios 4G网络定位失败问题

最近项目上须要使用地图来定位当前位置,因而乎本身决定用高德地图（AMap),可是遇到两个问题

1,目前使用的http 在ios上定位正常 安卓定位失败,报错信息

Geolocation permission denied.
复制代码

缘由是由于http 被谷歌 ios10封杀了,会出现定位失败的状况,因此须要将域名升级https

2,将域名升级成https后 安卓定位正常, 在ios 上出现定位失败问题,解决方法是加载远程定位脚本 在public index.html 引入remogeo.js文件,而后在AMap的初始化定位组件时，加入一个判断，并调用remoGeo方法,便可解决ios在4G状态下定位失败的问题

<script src="https://a.amap.com/jsapi_demos/static/remogeo/remogeo.js"></script>

if (AMap.UA.ios) {
    //使用远程定位，见 remogeo.js
    var remoGeo = new RemoGeoLocation();
    //替换方法
    navigator.geolocation.getCurrentPosition = function() {
        return remoGeo.getCurrentPosition.apply(remoGeo, arguments);
    };
    //替换方法
    navigator.geolocation.watchPosition = function() {
        return remoGeo.watchPosition.apply(remoGeo, arguments);
    };
}
复制代码

下面是完整代码

yarn add react-amap
import { Map } from 'react-amap'
复制代码

render() {
        let that = this;
        let onComplete=(data)=>{
            console.log(data,'data')
            that.setState({
                position:data.formattedAddress
            })
            appStore.Loading.hidden()
        };
        let onError = ()=>{
            // Toast.info('定位失败', 2);
        };
        const events = {
            created: (instance) => {
                instance.plugin('AMap.Geolocation', function () {
                    let geolocation = new AMap.Geolocation({
                        enableHighAccuracy: true,//是否使用高精度定位，默认:true
                        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                        convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                        timeout: 10000,          //超过10秒后中止定位，默认：5s
                        showButton: true,        //显示定位按钮，默认：true
                        buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
                        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                        showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                        panToLocation: true,     //定位成功后将定位到的位置做为地图中心点，默认：true
                        zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
                        extensions:'all'
                    });
                    if (AMap.UA.ios) {
                        //使用远程定位，见 remogeo.js
                        var remoGeo = new RemoGeoLocation();
                        //替换方法
                        navigator.geolocation.getCurrentPosition = function() {
                            return remoGeo.getCurrentPosition.apply(remoGeo, arguments);
                        };
                        //替换方法
                        navigator.geolocation.watchPosition = function() {
                            return remoGeo.watchPosition.apply(remoGeo, arguments);
                        };
                    }
                    instance.addControl(geolocation);
                    geolocation.getCurrentPosition();
                    AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
                    AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
                });
                
            }
        };
        return (
            <div className='aima-container'>
                <div className='header'>
                    <div className='left' onClick={this.finishClick}>
                        <img src={iconRight} alt=''/>
                    </div>
                    <div className='center'>
                        打卡
                    </div>
                    <div className='right' onClick={() => this.props.history.push('/record')}>
                        打卡记录
                    </div>
                </div>
                <div className='map' id='map'>
                    <Map events={events}  amapkey={'66c5973f867f1c162e16340693ed9091'}>
                    </Map>
                </div>
            </div>
        )
    }
复制代码