React中高德地图精确定位

import React, { useEffect } from 'react'
import styles from './index.less'
import AMapLoader from '@amap/amap-jsapi-loader';

export default function Map() {
    let temp;
    let map: {
        getBounds: () => {
            (): any;
            new(): any;
            getSouthWest: { (): any; new(): any };
        };
        panBy: (arg0: number, arg1: number) => void;
        addControl: (arg0: any) => void;
    };

    const init = () => {
        AMapLoader.load({
            key: '81bcc0d331d7a59acce65fd3ea3f41e6', // 申请好的Web端开发者Key，首次调用 load 时必填
            version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['AMap.ToolBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            AMapUI: {
                //重点就是这个
                version: '1.1',
                plugins: [
                    'misc/PathSimplifier',
                    'overlay/SimpleMarker',
                    'misc/PositionPicker',
                ], //SimpleMarker设置自定义图标，PathSimplifier轨迹展示组件
            },
        }).then((AMap) => {
            AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker: any) {
                map = new AMap.Map('container', {
                    zoom: 16,
                    scrollWheel: false,
                });
                // 1231231
                AMap.plugin('AMap.Geolocation', function() {
                    var geolocation = new AMap.Geolocation({
                        enableHighAccuracy: true,//是否使用高精度定位，默认:true
                        timeout: 10000,          //超过10秒后停止定位，默认：5s
                        buttonPosition:'RB',    //定位按钮的停靠位置
                        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                        zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
            
                    });
                    map.addControl(geolocation);
                    geolocation.getCurrentPosition(function(status,result){
                        if(status=='complete'){
                            onComplete(result)
                        }else{
                            onError(result)
                        }
                    });
                });
                //解析定位结果
                function onComplete(data) {
                    // document.getElementById('status').innerHTML='定位成功'
                    var str = [];
                    str.push('定位结果：' + data.position);
                    str.push('定位类别：' + data.location_type);
                    if(data.accuracy){
                         str.push('精度：' + data.accuracy + ' 米');
                    }//如为IP精确定位结果则没有精度信息
                    str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
                    console.log(str)
                }
                // 解析定位错误信息
                function onError(data) {
                    console.log(data)
                }
                // 123123123
                var positionPicker = new PositionPicker({
                    mode: 'dragMap', //设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
                    map,
                });
                var dragMapMode = document.getElementsByName('mode')[0];
                var dragMarkerMode = document.getElementsByName('mode')[1];

                dragMapMode && dragMapMode.addEventListener('change', onModeChange);
                dragMarkerMode &&
                    dragMarkerMode.addEventListener('change', onModeChange);
                positionPicker.start();
                map.panBy(0, 1);
                map.addControl(
                    new AMap.ToolBar({
                        liteStyle: true,
                    }),
                );
            });
        }).catch((e) => {
            console.log(e);
        });
    };

    useEffect(() => {
        init()
    }, [])
    return (
        <div>
            <div id='container' style={{ width: '100%', height: '420px' }}></div>
            <div className={styles.search}><i className="iconfont">&#xe6ca;</i>搜索地点</div>
            {/* <h4 id='status'></h4>
            <p id='result'></p>
            <p>由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p> */}
        </div>
    )
}