React-Implementierungsbeispiel mit Amap (react-amap)

cnpm ich reagiere-amap

<script src="https://unpkg.com/[email protected]/dist/react-amap.min.js"></script>

importiere React, {Component} von 'react'
importiere {Map,Marker} aus 'react-amap'
const mapKey = '1234567809843asadasd' //Sie müssen es auf der offiziellen Website von Amap beantragen. class Address extends Component {
	Konstruktor (Requisiten) {
        super (Requisiten)
        dieser.Zustand = {  
        }
    }
	machen(){
		zurückkehren (
			<div Stil={{Breite: '100%', Höhe: '400px'}}>
				<Karte amapkey={mapKey} 
				     zoom={15}></Karte>
			</div>
		)
	}
}

Standardadresse exportieren

<Kartenplugins={["ToolBar", 'Scale']}></Map>

<Karte>
	<Markierungsposition={['lng','lat']}></Markierung>
</Karte>

<Karte>
	<InfoFenster
            Position = {dieser.Zustand.Position}
            sichtbar = {dieser.Zustand.sichtbar}
            istCustom={false}
            Inhalt={html}
            Größe={diese.Zustandsgröße}
            Offset = {dieser.Zustand.Offset}
            Ereignisse={this.windowEvents}
          />
</Karte>

const Ereignisse = {
    erstellt: (Instanz) => { console.log(instance.getZoom())},
    click: () => { console.log('Sie haben auf die Karte geklickt') }
}
<Kartenereignisse={Ereignisse} />

importiere React, {Komponente} von 'react'
importiere { Modal, Input} von 'antd'
Stile aus „./index.scss“ importieren
Klassennamen aus „Klassennamen“ importieren
importiere { Map, Marker, InfoWindow} aus 'react-amap'
Marker aus „SRC/statics/images/signin/marker2.png“ importieren

const mapKey = "42c177c66c03437400aa9560dad5451e"

Klasse Adresse erweitert Komponente {
    Konstruktor (Requisiten) {
        super(Requisiten)
        dieser.Zustand = {
            signAddrList:{
                Name:'',
                Adresse:'',
                Längengrad: 0,
                Breitengrad: 0
            },
            Geocoder:'',
            Suchinhalt:'',
            isChose:false
        }
    }

    //Daten ändern allgemeine Methode (einzelne Ebene)

    changeData = (Wert, Schlüssel) => {
        let { signAddrList } = dieser.Zustand
        signAddrList[Schlüssel] = Wert
        dies.setState({
            signAddrList:signAddrList
        })
    }

    placeSearch = (e) => {
        dies.setState({searchContent:e})
    }

    suchOrt = (e) => {
        console.log(1234,e)
    }





    componentDidMount() {
    
    }

    rendern() {
        let { changeModal, saveAddressDetail} = this.props
        let { signAddrList } = dieser.Zustand
        const wähleAdresse = {
            erstellt:(e) => {
                lass auto
                Geocoder
                Fenster.AMap.plugin('AMap.Autocomplete',() => {
                    auto = neues Fenster.AMap.Autocomplete({input:'tipinput'});
                })

                Fenster.AMap.plugin(["AMap.Geocoder"],Funktion(){
                    Geocoder = neue AMap.Geocoder({
                        radius:1000, //Mit den bekannten Koordinaten als Mittelpunkt und radius als Radius werden die Sonderziele und Straßeninformationen innerhalb des Bereichs zurückgegeben. Erweiterungen: „alle“ //Gibt die Adressbeschreibung und die Sonderziele und Straßeninformationen in der Nähe zurück. Der Standardwert ist „Basis“.
                    });
                });

                Fenster.AMap.plugin('AMap.PlaceSearch',() => {
                    let place = neues Fenster.AMap.PlaceSearch({})
                    lass _dies = dies
                    window.AMap.event.addListener(auto,"select",(e) => {
                        Ort.Suche(e.poi.name)
                        geocoder.getAddress(e.poi.location,Funktion (Status,Ergebnis) {
                            wenn (Status === 'abgeschlossen'&&Ergebnis.regeocode) {
                                let Adresse = Ergebnis.regeocode.formattedAddress;
                                let data = result.regeocode.addressComponent
                                let name = data.township + data.street + data.streetNumber
                                _this.changeData(Adresse,'Adresse')
                                _this.changeData(Name,'Name')
                                _this.changeData(e.poi.location.lng,'Längengrad')
                                _this.changeData(e.poi.location.lat,'Breitengrad')
                                _this.setState({isChose:true})
                            }
                        })
                    })
                })
            },
            klick:(e) => {
                const _this = dies
                var Geocoder
                var infoWindow
                var lnglatXY = neue AMap.LngLat(e.lnglat.lng,e.lnglat.lat);
                let content = '<div>Positionierung…</div>'

                Fenster.AMap.plugin(["AMap.Geocoder"],Funktion(){
                    Geocoder = neue AMap.Geocoder({
                        radius:1000, //Mit den bekannten Koordinaten als Mittelpunkt und radius als Radius werden die Sonderziele und Straßeninformationen innerhalb des Bereichs zurückgegeben. Erweiterungen: „alle“ //Gibt die Adressbeschreibung und die Sonderziele und Straßeninformationen in der Nähe zurück. Der Standardwert ist „Basis“.
                    });
                    geocoder.getAddress(e.lnglat,Funktion (Status,Ergebnis) {
                        wenn (Status === 'abgeschlossen'&&Ergebnis.regeocode) {
                            let Adresse = Ergebnis.regeocode.formattedAddress;
                            let data = result.regeocode.addressComponent
                            let name = data.township + data.street + data.streetNumber
                          
                            _this.changeData(Adresse,'Adresse')
                            _this.changeData(Name,'Name')
                            _this.changeData(e.lnglat.lng,'Längengrad')
                            _this.changeData(e.lnglat.lat,'Breitengrad')
                            _this.setState({isChose:true})
                        }
                    })
                });
                
            }
        }
        zurückkehren (
            <div>
                <Modal sichtbar={true}
                       Titel="Bürostandort"
                       zentriert={true}
                       beiAbbrechen={() => changeModal('addressStatus',0)}
                       onOk = {() => Adressdetail speichern(signAddrList)}
                       Breite={700}>
                    <div Klassenname={styles.serach}>
                        <Eingabe-ID="tipinput"
                               Klassenname={styles.searchContent}
                               beiÄnderung={(e) => diese.Ortssuche(e.Ziel.Wert)}
                               onKeyDown={(e) => dieser.Suchplatz(e)} />
                        <i className={classname(styles.serachIcon,"iconfont icon-weibiaoti106")}></i>
                    </div>
                    <div className={styles.mapContainer} id="Inhalt" >
                        {
                            dieser.Zustand.istAusgewählt ? <Map amapkey={mapKey}
                                                      plugins={["ToolBar", 'Skalieren']}
                                                      Ereignisse={Adresse auswählen}
                                                      Zentrum = { [ signAddrList.Länge, signAddrList.Breitengrad] }
                                                      zoom={15}>
                                <Markierungsposition={[signAddrList.longitude,signAddrList.latitude]}/>
                            </Map> : <Map amapkey={mapKey}
                                          plugins={["ToolBar", 'Skalieren']}
                                          Ereignisse={Adresse auswählen}
                                          zoom={15}>
                                <Markierungsposition={[signAddrList.longitude,signAddrList.latitude]}/>
                            </Karte>
                        }
                    </div>
                    <div className="mar-t-20">Detaillierte Adresse:
                        {signAddrList.addr}
                    </div>
                </Modal>
            </div>
        )
    }
}

Standardadresse exportieren