React+Amap obtains latitude and longitude in real time and locates the address

DOM: <div id='map_container'>
        //Map container</div>
    
//Define a map class class GeoMap {
    constructor() {
        this.el = 'map_container'
        this.defaultConfig = { //Default configuration zoom: 16, //Default zoom level touchZoomCenter: 1, //When the zoom level is 1, the map center is used for zooming resizeEnable: true, //Monitor the size change of the map container doubleClickZoom: true, //Double-click to zoom in the map}
        this.map = null // Map instance this.mapMove = false // Is the map moving this.centerPixel = { y: '-999', x: '-999' } // Default location of the point }
    // Initialize the map initFn() {
        this.createMap()
        // ...
    }
    // Create an instance createMap() {
        this.map = new AMap.Map(this.el, this.defaultConfig)
        // Add your favorite style (background color) to the map
        this.map.setMapStyle('amap://styles/28d5c5df182464d14316bfa41383096c')
    }
    // ...
 }
 export default new GeoMap()

    Dom: <div id='map_container'> //Map container<div id='center_icon' style={{left: `${instance.centerPixel.x}px`, top: `${instance.centerPixel.y}px` }}>
            <img src='扎点图片' /> // There is a 扎点 animation introduction at the end of the article</div>
       </div>
    css: #map_container {
            flex: 1;
            position: relative;
            #center_icon {
                position: absolute;
                z-index: 101;
                >img{  
                    width: 52px;
                    height: 64px;
                    // --------The following code will be introduced in detail below---------
                    position: relative;
                    top: -64px;
                    left: -26px;
                }
            }
         }

    setCenterIcon() {
        let lnglat = this.map.getCenter()
        let pixel = this.map.lngLatToContainer(lnglat)
        this.centerPixel = pixel
    }

    getLocation() {
        const mapError = new Map([
            ['Get ipLocation failed.', 'IP precise positioning failed'],
            ['Browser not Support html5 geolocation.', 'Browser does not support native positioning interface'],
            ['Geolocation permission denied.', 'The browser prohibits location requests in non-secure domains'],
            ['Get geolocation time out.', 'Browser location timeout'],
            ['Get geolocation failed.', 'Positioning failed']
        ])
        this.map.plugin('AMap.Geolocation', () => {
            const geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, //Whether to use high-precision positioning timeout: 30000, //Stop positioning after n seconds showButton: false, //Show positioning button showMarker: true, //Show point mark at the located position after successful positioning showCircle: false, //After successful positioning, use a circle to indicate the positioning accuracy range panToLocation: true, //After successful positioning, use the located position as the center point of the map ---
                zoomToAccuracy: true, //Adjust the map field of view so that the positioning position and accuracy range are visible})
            this.map.setZoom(16) // Set the initial zoom ratio when repositioning after the zoom ratio changes this.map.addControl(geolocation) // Add control geolocation.getCurrentPosition() // Automatically position when entering the page AMap.event.addListener(geolocation, 'complete', (result) => {
                // Do not retrieve data here, because the returned latitude, longitude, and detailed address have large deviations --- there is an introduction to obtaining the precise address below})
            AMap.event.addListener(geolocation, 'error', (err) => { // Error message for failed positioning let msg = mapError.get(err.message) || err.message
                console.log(msg);
            })
        })
    }

    mapMove() {
        // * Map moving this.map.on('mapmove', () => {
           this.mapMove = false
        })
        // * Map movement ends this.map.on('moveend', () => {
            this.mapMove = true
            this.getCenterAddress() // Get the address --- more details will be given below})
    }

    getCenterAddress() {
        let lnglat = this.map.getCenter()
        AMap.service('AMap.PlaceSearch', () => {
            let placeSearch = new AMap.PlaceSearch({
                    pageSize: 10,
                    pageIndex: 1,
                    children: 1,
                    extensions: 'all',
                    type: 'Access facilities|Place name address information|Government agencies and social groups|Buildings|Industrial parks|Scenic spots|Airport departure/arrival|Railway station|Port terminal|Long-distance bus station|Subway station|Light rail station|Bus station',
                })
            let center = [lnglat.lng, lnglat.lat]
            placeSearch.searchNearBy('', center, 50, (sta, result) => {
                if (sta === 'complete' && result.info === 'OK') {
                    // The first item in the result.poiList.pois array is the exact address obtained})
            })
    }

    Dom: <img src='点点图片' className={Instance.mapMove ? 'pinAnima' : ''}/>
    
    css: 
        .pinAnima{
            animation: bounce 0.75s;
        }
        
    @keyframes bounce {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0)
    }
}