Получить лат и lang с адреса, чтобы передать его, чтобы отреагировать на рекламный листок

Question

ответить на лифте требуется лат и lng, чтобы показать нужное место на карте. Как я могу вычислить, что lat и lng от данного адреса? Мне нужен лат и lng из двух адресов.

Должен ли я использовать геокодер и обернуть функцию renderMap внутри него? В моем коде я хочу lat и lng cityOrigen и 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

Пара вещей:

• в renderMap у вас есть cityOrigen и компонент ReactMap это передается в crityOrigen. Я уверен, что это просто опечатка.

• Вы можете использовать плагин Geocoder Leaflet, такой как this one. Вы можете поместить это в свою функцию renderMap, чтобы проанализировать местоположение (которое я принимаю cityDestino и cityOrigen, по адресу).