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>
        )
    }
複製代碼