Reactjs 谷歌地图从给定坐标绘制路线

我正在使用

googlemaps-react

模块，直到最后一段时间一切正常。使用这个软件包，我可以点击地图，设置多个标记，并“直观地”定义我的路线。我不认为

Polygon

不会考虑实际的街道和地图几何（愚蠢的我）。有人能帮助我，并建议如何在地图上提供正确绘制的路线，而不是将标记X连接到标记Y的直线吗？这就是我到目前为止所看到的：

这是我在应用程序中形成的坐标数组，通过以下方式绘制多边形：

---

我正在使用Google maps api和

Google maps react

软件包。

您可能想查看此页面

该API调用的响应以及您已经从绘制的线条中获得的数据应该为您提供将路径映射到道路所需的JSON数据。这可能不是最优雅的解决方案，因为您可能需要添加一个按钮或一些东西来计算到道路的路线或类似的东西

---

或者，您可以在拥有两个点后发送API调用，并在放置每个线段后更新地图。但这需要大量的API调用。希望有帮助

您可能想签出此页面

该API调用的响应以及您已经从绘制的线条中获得的数据应该为您提供将路径映射到道路所需的JSON数据。这可能不是最优雅的解决方案，因为您可能需要添加一个按钮或一些东西来计算到道路的路线或类似的东西

---

或者，您可以在拥有两个点后发送API调用，并在放置每个线段后更新地图。但这需要大量的API调用。希望有帮助

正如评论中正确提到的，需要用于该目的：

方向显示为在地图上绘制路线的多段线，或 另外，作为元素中的一系列文本描述 （例如，“右转进入威廉斯堡大桥坡道”）

下面的示例演示如何将

谷歌地图API方向服务

集成到

谷歌地图反应

中以显示路线

假设

data

prop包含以格式表示的坐标 如问题所述。方向服务代码已修改 从

示例

class MapContainer extends React.Component {
  constructor(props) {
    super(props);
    this.handleMapReady = this.handleMapReady.bind(this);
  }

  handleMapReady(mapProps, map) {
    this.calculateAndDisplayRoute(map);
  }

  calculateAndDisplayRoute(map) {
    const directionsService = new google.maps.DirectionsService();
    const directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);


    const waypoints = this.props.data.map(item =>{
      return{
        location: {lat: item.lat, lng:item.lng},
        stopover: true
      }
    })
    const origin = waypoints.shift().location;
    const destination = waypoints.pop().location;

    directionsService.route({
      origin: origin,
      destination: destination,
      waypoints: waypoints,
      travelMode: 'DRIVING'
    }, (response, status) => {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

  render() {
    return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={this.props.zoom}
          initialCenter={this.props.center}
          onReady={this.handleMapReady}
        />
      </div>
    );
  }
}

类MapContainer扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleMapReady=this.handleMapReady.bind（this）；
}
handleMapReady（地图道具、地图）{
此。计算显示路线（地图）；
}
计算显示路线（地图）{
const directionsService=new google.maps.directionsService（）；
const directionsDisplay=new google.maps.DirectionsRenderer（）；
方向显示.setMap（地图）；
const waypoints=this.props.data.map（项目=>{
返回{
位置：{lat:item.lat，lng:item.lng}，
中途停留：对
}
})
常量原点=航路点.shift（）.位置；
const destination=waypoints.pop（）.位置；
方向服务.路线({
来源:来源,，
目的地：目的地，
航路点：航路点，
travelMode:“驾驶”
}，（响应、状态）=>{
如果（状态=='OK'）{
方向显示。设置方向（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
render（）{
返回(
);
}
}

---

正如评论中正确提到的，需要用于该目的：

方向显示为在地图上绘制路线的多段线，或 另外，作为元素中的一系列文本描述 （例如，“右转进入威廉斯堡大桥坡道”）

下面的示例演示如何将

谷歌地图API方向服务

集成到

谷歌地图反应

中以显示路线

假设

data

prop包含以格式表示的坐标 如问题所述。方向服务代码已修改 从

示例

class MapContainer extends React.Component {
  constructor(props) {
    super(props);
    this.handleMapReady = this.handleMapReady.bind(this);
  }

  handleMapReady(mapProps, map) {
    this.calculateAndDisplayRoute(map);
  }

  calculateAndDisplayRoute(map) {
    const directionsService = new google.maps.DirectionsService();
    const directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);


    const waypoints = this.props.data.map(item =>{
      return{
        location: {lat: item.lat, lng:item.lng},
        stopover: true
      }
    })
    const origin = waypoints.shift().location;
    const destination = waypoints.pop().location;

    directionsService.route({
      origin: origin,
      destination: destination,
      waypoints: waypoints,
      travelMode: 'DRIVING'
    }, (response, status) => {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

  render() {
    return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={this.props.zoom}
          initialCenter={this.props.center}
          onReady={this.handleMapReady}
        />
      </div>
    );
  }
}

类MapContainer扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleMapReady=this.handleMapReady.bind（this）；
}
handleMapReady（地图道具、地图）{
此。计算显示路线（地图）；
}
计算显示路线（地图）{
const directionsService=new google.maps.directionsService（）；
const directionsDisplay=new google.maps.DirectionsRenderer（）；
方向显示.setMap（地图）；
const waypoints=this.props.data.map（项目=>{
返回{
位置：{lat:item.lat，lng:item.lng}，
中途停留：对
}
})
常量原点=航路点.shift（）.位置；
const destination=waypoints.pop（）.位置；
方向服务.路线({
来源:来源,，
目的地：目的地，
航路点：航路点，
travelMode:“驾驶”
}，（响应、状态）=>{
如果（状态=='OK'）{
方向显示。设置方向（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
render（）{
返回(
);
}
}

---

要显示实际路线，您需要为路线调用direction API。多边形或线条不在街道和实际路线的后面，如您所见。这是相当直接的，你只需要做如下的事情。请记住，您将有一个起点和一个终点，如果您需要在这两者之间停站，则称为航路点。总共可以有25张，@TheeBen，谢谢。但是您可以使用

fetch

向目标api发出请求吗？我提出一个请求，试着去拿它，我得到了b