erhalten lat und lang von der Adresse, um es zu übergeben, um Flugblatt zu reagieren

Question

reagieren Flugblatt benötigt lat und lng, um gewünschten Platz in der Karte zu zeigen. Wie kann ich das lat und lng von gegebener Adresse berechnen? Ich brauche den Lat und Lng von zwei Adressen.

Sollte ich Geocoder verwenden und renderMap-Funktion darin einfügen? In meinem Code möchte ich lat und lng von cityOrigen und cityDestino.

function renderMap(cityOrigen, cityDestino) { 
    return <ReactMap crityOrigen={cityOrigen} cityDestino={cityDestino} />; 
} 

const ReactMap = ({ cityOrigen, cityDestino }) => { 
    const position = [51.505, -0.09]; 
    return (
    <Map center={position} zoom={13} style={{ height: 500 }}> 
     <TileLayer 
     url='https://mt{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}' 
     /> 
     <Marker position={position}> 
     <Popup> 
      <span>A pretty CSS3 popup.</span> 
     </Popup> 
     </Marker> 
    </Map> 
); 
}; 

class CarResult extends Component { 
    render() { 
    const { carResult, origen, destino } = this.props; 
    const cityOrigen = origen && origen.label.split(', ')[0]; 
    const cityDestino = destino && destino.label.split(', ')[0]; 
    const carResultMap = renderMap(cityOrigen, cityDestino); 
    if (!carResult.fetching) { 
     return (
     <div> 
      Hemos encontrado {carResultList.length} ofertas para ti. 
      <div className="car-result-container"> 
      <Grid fluid> 
       <Row> 
       <Col xs={12} sm={12} md={6}> 
        {carResultList} 
       </Col> 
       <Col x={12} sm={12} md={6}> 
        {carResultMap} 
       </Col> 
       </Row> 
      </Grid> 
      </div> 
     </div> 
    ); 
    } 
    } 

Answer 1

Paar Dinge:

• in renderMap haben Sie cityOrigen und die ReactMap Komponente wird in crityOrigen geleitet wird. Ich bin sicher, das ist nur ein Tippfehler.

• Sie können ein Leaflet Geocoder Plugin wie this one verwenden. Sie können das in Ihre renderMap Funktion einfügen, um den Standort zu analysieren (was ich davon annehme, ist cityDestino und cityOrigen, in Adresse).