アドレスからlatとlangを取得してリーフレットに反応させます

Question

リアクションリーフレットにはlatとlngが必要です。与えられた住所からその緯度と経度をどのように計算できますか？私は2つのアドレスのlatと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に渡されています。それはちょうどタイプミスだと思うよ。

• this oneなどのリーフレットジオコーダープラグインを使用できます。あなたは関数にその位置を解析することができます（アドレスはcityDestinoとcityOrigenです）。