React+Amapは緯度と経度をリアルタイムで取得し、住所を特定します

DOM: <div id='map_container'>
        //マップコンテナ</div>
    
//マップクラスを定義する class GeoMap {
    コンストラクタ() {
        this.el = 'マップコンテナ'
        this.defaultConfig = { //デフォルト設定 zoom: 16, //デフォルトのズームレベル touchZoomCenter: 1, //ズームレベルが1の場合、マップの中心がズームに使用されます resizeEnable: true, //マップコンテナのサイズ変更を監視します doubleClickZoom: true, //ダブルクリックするとマップが拡大します}
        this.map = null // マップインスタンス this.mapMove = false // マップは移動していますか this.centerPixel = { y: '-999', x: '-999' } // ポイントのデフォルトの位置 }
    // マップを初期化する initFn() {
        この.createMap()
        // ...
    }
    // インスタンスを作成する createMap() {
        this.map = 新しい AMap.Map(this.el、this.defaultConfig)
        // お気に入りのスタイル（背景色）をマップに追加します
        this.map.setMapStyle('amap://styles/28d5c5df182464d14316bfa41383096c')
    }
    // ...
 }
 デフォルトの新しい GeoMap() をエクスポートします

    Dom: <div id='map_container'> //マップ コンテナー<div id='center_icon' style={{left: `${instance.centerPixel.x}px`, top: `${instance.centerPixel.y}px` }}>
            <img src='扎点圖片' /> // 記事の最後に扎点アニメーションの紹介があります</div>
       </div>
    css: #map_container {
            フレックス: 1;
            位置: 相対的;
            #センターアイコン {
                位置: 絶対;
                zインデックス: 101;
                >画像{  
                    幅: 52px;
                    高さ: 64px;
                    // --------以下のコードについては以下で詳しく説明します---------
                    位置: 相対的;
                    上: -64px;
                    左: -26px;
                }
            }
         }

    setCenterIcon() {
        lnglat = this.map.getCenter() とします。
        ピクセルを this.map.lngLatToContainer(lnglat) とします。
        this.centerPixel = ピクセル
    }

    位置情報を取得する() {
        const mapError = 新しいマップ([
            ['ipLocation の取得に失敗しました。', 'IP の正確な位置特定に失敗しました'],
            ['ブラウザは HTML5 ジオロケーションをサポートしていません。', 'ブラウザはネイティブのポジショニング インターフェースをサポートしていません'],
            ['位置情報の許可が拒否されました。'、'ブラウザは安全でないドメインでの位置情報のリクエストを禁止しています']、
            ['位置情報の取得がタイムアウトしました。'、'ブラウザの位置情報のタイムアウト']、
            ['位置情報の取得に失敗しました。'、'位置特定に失敗しました']
        ])
        this.map.plugin('AMap.Geolocation', () => {
            const geolocation = 新しい AMap.Geolocation({
                enableHighAccuracy: true, //高精度測位を使用するかどうか timeout: 30000, //n秒後に測位を停止する showButton: false, //測位ボタンを表示する showMarker: true, //測位に成功した後、測位した位置にポイントマークを表示する showCircle: false, //測位に成功した後、円を使用して測位精度の範囲を示す panToLocation: true, //測位に成功した後、測位した位置を地図の中心点として使用する ---
                zoomToAccuracy: true, // 測位位置と精度範囲が見えるようにマップの視野を調整します})
            this.map.setZoom(16) // ズーム比の変更後に再配置する際の初期ズーム比を設定します this.map.addControl(geolocation) // コントロールを追加します geolocation.getCurrentPosition() // ページに入るときに自動的に配置します AMap.event.addListener(geolocation, 'complete', (result) => {
                // 返される緯度、経度、詳細な住所には大きな偏差があるため、ここではデータを取得しないでください --- 正確な住所を取得する方法については以下で説明します})
            AMap.event.addListener(geolocation, 'error', (err) => { // 位置決め失敗のエラーメッセージ let msg = mapError.get(err.message) || err.message
                コンソールログ(メッセージ);
            })
        })
    }

    マップ移動() {
        // * マップの移動 this.map.on('mapmove', () => {
           this.mapMove = false
        })
        // * マップの移動が終了します this.map.on('moveend', () => {
            this.mapMove = true
            this.getCenterAddress() // アドレスを取得します --- 詳細は以下に記載されています})
    }

    取得センターアドレス() {
        lnglat = this.map.getCenter() とします。
        AMap.service('AMap.PlaceSearch', () => {
            placeSearch = new AMap.PlaceSearch({
                    ページサイズ: 10,
                    ページインデックス: 1,
                    子供: 1,
                    拡張子: 'すべて'、
                    タイプ:「アクセス施設|地名住所情報|政府機関および社会団体|建物|工業団地|景勝地|空港出発/到着|鉄道駅|港湾ターミナル|長距離バス停|地下鉄駅|ライトレール駅|バス停」,
                })
            center = [lnglat.lng, lnglat.lat] とします。
            placeSearch.searchNearBy('', center, 50, (sta, 結果) => {
                if (sta === 'complete' && result.info === 'OK') {
                    // result.poiList.pois 配列の最初の項目は、取得された正確なアドレスです})
            })
    }

    Dom: <img src='点点図形' className={Instance.mapMove ? 'pinAnima' : ''}/>
    
    css: 
        .pinAnima{
            アニメーション: バウンス 0.75 秒;
        }
        
    @keyframes バウンス {
    0% {
        変換: translateY(0)
    }
    50% {
        変換: translateY(-20px);
    }
    100% {
        変換: translateY(0)
    }
}