React+Amap ermittelt Breiten- und Längengrad in Echtzeit und lokalisiert die Adresse

DOM: <div id='Kartencontainer'>
        //Map-Container</div>
    
//Definiere eine Kartenklasse class GeoMap {
    Konstruktor() {
        dies.el = "Kartencontainer"
        this.defaultConfig = { //Standardkonfiguration zoom: 16, //Standardzoomstufe touchZoomCenter: 1, //Bei Zoomstufe 1 wird der Kartenmittelpunkt zum Zoomen verwendet resizeEnable: true, //Größenänderung des Kartencontainers überwachen doubleClickZoom: true, //Doppelklicken, um in die Karte zu zoomen}
        this.map = null // Karteninstanz this.mapMove = false // Bewegt sich die Karte? this.centerPixel = { y: '-999', x: '-999' } // Standardstandort des Punkts }
    // Initialisiere die Karte initFn() {
        dies.createMap()
        // ...
    }
    // Erstelle eine Instanz createMap() {
        diese.map = neue AMap.Map(diese.el, diese.defaultConfig)
        // Fügen Sie der Karte Ihren bevorzugten Stil (Hintergrundfarbe) hinzu
        diese.map.setMapStyle('amap://styles/28d5c5df182464d14316bfa41383096c')
    }
    // ...
 }
 exportiere standardmäßig neue GeoMap()

    Dom: <div id='map_container'> //Kartencontainer<div id='center_icon' style={{left: `${instance.centerPixel.x}px`, top: `${instance.centerPixel.y}px` }}>
            <img src='扎点图片' /> // Am Ende des Artikels gibt es eine Einführung in die 扎点-Animation</div>
       </div>
    css: #map_container {
            biegen: 1;
            Position: relativ;
            #center_icon {
                Position: absolut;
                Z-Index: 101;
                >img{  
                    Breite: 52px;
                    Höhe: 64px;
                    // --------Der folgende Code wird unten ausführlich vorgestellt---------
                    Position: relativ;
                    oben: -64px;
                    links: -26px;
                }
            }
         }

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

    Standort abrufen() {
        const mapError = neue Karte([
            ['Abrufen des IP-Standorts ist fehlgeschlagen.', 'IP-genaue Ortung ist fehlgeschlagen'],
            ['Browser unterstützt keine HTML5-Geolokalisierung.', 'Browser unterstützt keine native Positionierungsschnittstelle'],
            ['Geolokalisierungsberechtigung verweigert.', 'Der Browser verbietet Standortanfragen in nicht sicheren Domänen'],
            ['Zeitüberschreitung bei Geolokalisierung abrufen.', 'Zeitüberschreitung bei Browserstandort'],
            ['Die Geolokalisierung konnte nicht abgerufen werden.', 'Die Positionsbestimmung ist fehlgeschlagen']
        ])
        dieses.map.plugin('AMap.Geolocation', () => {
            const geolocation = neue AMap.Geolocation({
                enableHighAccuracy: true, // Gibt an, ob eine hochpräzise Positionierung verwendet werden soll. timeout: 30000, // Positionierung nach n Sekunden beenden. showButton: false, // Positionierungsschaltfläche anzeigen. showMarker: true, // Nach erfolgreicher Positionierung Punktmarkierung an der lokalisierten Position anzeigen. showCircle: false, // Nach erfolgreicher Positionierung einen Kreis verwenden, um den Genauigkeitsbereich der Positionierung anzuzeigen. panToLocation: true, // Nach erfolgreicher Positionierung die lokalisierte Position als Mittelpunkt der Karte verwenden ---
                zoomToAccuracy: true, //Passe das Sichtfeld der Karte so an, dass die Positionierungsposition und der Genauigkeitsbereich sichtbar sind})
            this.map.setZoom(16) // Legt das anfängliche Zoomverhältnis fest, wenn nach einer Änderung des Zoomverhältnisses die Position geändert wird. this.map.addControl(geolocation) // Steuerelement hinzufügen geolocation.getCurrentPosition() // Automatische Positionierung beim Aufrufen der Seite AMap.event.addListener(geolocation, 'complete', (result) => {
                // Hier keine Daten abrufen, da die zurückgegebenen Breiten- und Längengrade sowie die genaue Adresse große Abweichungen aufweisen --- weiter unten finden Sie eine Einführung zum Abrufen der genauen Adresse})
            AMap.event.addListener(geolocation, 'error', (err) => { // Fehlermeldung für fehlgeschlagene Positionierung let msg = mapError.get(err.message) || err.message
                Konsole.log(Nachricht);
            })
        })
    }

    mapMove() {
        // * Karte verschieben this.map.on('mapmove', () => {
           this.mapMove = falsch
        })
        // * Kartenbewegung endet this.map.on('moveend', () => {
            this.mapMove = wahr
            this.getCenterAddress() // Adresse abrufen --- weitere Details folgen weiter unten})
    }

    getCenterAddress() {
        lass lnglat = this.map.getCenter()
        AMap.service('AMap.PlaceSearch', () => {
            let placeSearch = neue AMap.PlaceSearch({
                    Seitengröße: 10,
                    Seitenindex: 1,
                    Kinder: 1,
                    Erweiterungen: „alle“,
                    Typ: ‚Zugangseinrichtungen|Ortsnamen-Adressinformationen|Behörden und gesellschaftliche Gruppen|Gebäude|Gewerbeparks|Aussichtspunkte|Abflug/Ankunft am Flughafen|Bahnhof|Hafenterminal|Fernbusbahnhof|U-Bahnhof|Stadtbahn-Haltestelle|Busbahnhof‘,
                })
            let center = [lnglat.lng, lnglat.lat]
            placeSearch.searchNearBy('', Zentrum, 50, (sta, Ergebnis) => {
                wenn (sta === 'abgeschlossen' und ergebnis.info === 'OK') {
                    // Das erste Element im Array result.poiList.pois ist die genaue erhaltene Adresse})
            })
    }

    Dom: <img src='Animationsobjekt' className={Instance.mapMove ? 'pinAnima' : ''}/>
    
    CSS: 
        .pinAnima{
            Animation: Abpraller 0,75 s;
        }
        
    @keyframes hüpfen {
    0% {
        transformieren: übersetzenY(0)
    }
    50 % {
        transformieren: übersetzenY(-20px);
    }
    100 % {
        transformieren: übersetzenY(0)
    }
}