Javascript 从地址获取lat和lang，并将其传递给react传单_Javascript_Google Maps_Reactjs_React Leaflet

Javascript 从地址获取lat和lang，并将其传递给react传单

javascript google-maps reactjs

Javascript 从地址获取lat和lang，并将其传递给react传单,javascript,google-maps,reactjs,react-leaflet,Javascript,Google Maps,Reactjs,React Leaflet,react传单需要lat和lng在地图上显示所需位置。如何从给定地址计算lat和lng？我需要两个地址的lat和lng 我应该使用geocoder并在其中包装renderMap函数吗？在我的代码中，我想要城市里根和城市斯蒂诺的lat和lng function renderMap(cityOrigen, cityDestino) { return <ReactMap crityOrigen={cityOrigen} cityDestino={cityDestino} />; }

react传单需要lat和lng在地图上显示所需位置。如何从给定地址计算lat和lng？我需要两个地址的lat和lng

我应该使用geocoder并在其中包装renderMap函数吗？在我的代码中，我想要城市里根和城市斯蒂诺的lat和lng

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>
      );
    }
    }

函数renderMap（CityRigen、cityDestino）{
返回；
}
const ReactMap=（{cityOrigen，cityDestino}）=>{
常数位置=[51.505，-0.09]；
返回(
一个漂亮的CSS3弹出窗口。
);
};
类CarResult扩展组件{
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）；
如果（！carResult.fetching）{
返回(
Hemos encontrado{carResultList.length}。
{carResultList}
{carResultMap}
);
}
}

两件事：

在
```
renderMap
```
中，您有
```
cityrorigen
```
，并且正在
```
criterorigen
```
中传递ReactMap组件。我确信这只是一个输入错误
您可以使用传单地理编码器插件，例如。您可以将其放入
```
renderMap
```
函数中，以解析位置（我假设地址中的位置是
```
cityDestino
```
和
```
cityrorigen
```
）

在
```
renderMap
```
中，您有
```
cityrorigen
```
，并且正在
```
criterorigen
```
中传递ReactMap组件。我确信这只是一个输入错误
您可以使用传单地理编码器插件，例如。您可以将其放入
```
renderMap
```
函数中，以解析位置（我假设地址中的位置是
```
cityDestino
```
和
```
cityrorigen
```
）