如何在React中更改Google Maps Directions API上的地址

问题描述

一般来说，我对React和javascript还是很陌生，所以这可能是一个简单的问题。

我正在使用react-google-maps查找两个地址之间的路线并将其呈现在地图上。

我从react-google-maps文档中获取了代码：

import React from "react";
import Geocode from "react-geocode";

const { compose,withProps,lifecycle } = require("recompose");
const {
  withScriptjs,withGoogleMap,GoogleMap,DirectionsRenderer,} = require("react-google-maps");



// Get latidude & longitude from address.
// Geocode.fromAddress("Example Street 123").then(
//   (response) => {
//     const { lat,lng } = response.results[0].geometry.location;
//     console.log(lat,lng);
//   },//   (error) => {
//     console.error(error);
//   }
// );


const MapWithADirectionsRenderer = compose(
  withProps({
    googleMapURL:
      "https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&v=3.exp&libraries=geometry,drawing,places",loadingElement: <div style={{ height: `100%` }} />,containerElement: <div style={{ height: `400px` }} />,mapElement: <div style={{ height: `100%` }} />,}),withScriptjs,lifecycle({
    componentDidMount() {
      const directionsService = new google.maps.DirectionsService();

      const origin = new google.maps.LatLng(-33.3666942,-70.50202159999999);
      const destination = new google.maps.LatLng(-33.3712284,-70.5051112);

      directionsService.route(
        {
          origin: origin,destination: destination,travelMode: google.maps.TravelMode.DRIVING,waypoints: [
            // {
            //   location: new google.maps.LatLng(),// },// {
            //   location: new google.maps.LatLng(6.6018,3.3515),],},(result,status) => {
          if (status === google.maps.Directionsstatus.OK) {
            this.setState({
              directions: result,});
          } else {
            console.error(`error fetching directions ${result}`);
          }
        }
      );
    },})
)((props) => (
  <GoogleMap
    defaultZoom={7}
    defaultCenter={new google.maps.LatLng(-33.436933,-70.634359)}
  >
    {props.directions && <DirectionsRenderer directions={props.directions} />}
  </GoogleMap>
));

export default MapWithADirectionsRenderer;

在App.js上，我将此组件称为：

              <MapWithADirectionsRenderer direccion={direccionorigen} />
            </div>

我无法在MapWithADirectionsRenderer组件内部传递信息，直到行为止

      const destination = new google.maps.LatLng(-33.3712284,-70.5051112);

我正在考虑使用Geocode.fromAddress获取坐标，然后将其传递到相应的行内。

我希望问题已经解决。我只是对recompose和react-google-maps中的某些功能不太熟悉。

谢谢大家。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

google-directions-api react-google-maps reactjs reactjs