javascript - 如何从地址获取纬度和经度并将其传递给 react 传单？

Question

react leaflet 需要 lat 和 lng 来显示 map 中所需的位置。我如何从给定地址计算纬度和经度？我需要两个地址的纬度和经度。

我应该使用地理编码器并将 renderMap 函数包装在其中吗？在我的代码中，我想要 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 中传递。我确信这只是一个拼写错误。

• 您可以使用 Leaflet Geocoder 插件，例如 this one 。您可以将其放入 renderMap 函数中来解析位置(我假设是地址中的 cityDestino 和 cityOrigen)。