Question

我正在使用google-maps-react模块，一切都好，直到最后一分钟都没问题。使用此程序包，我可以单击地图，设置多个标记并“直观地”定义我的路线。我认为Polygon不会考虑实际的街道和地图几何形状（我很愚蠢）。有人可以帮我一下，建议如何在地图上提供正确绘制的路线，而不是将标记X连接到标记Y的直线吗？这是我到目前为止的视觉效果：

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

我正在使用Google Maps api和google-maps-react软件包。

Answer 1

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

路线显示为多义线，在地图上绘制路线，或者另外作为元素内的一系列文字描述（例如，“右转到威廉斯堡大桥坡道”）

下面的示例演示如何将Google Maps API Directions Service集成到google-maps-react中以显示路线。

假设data道具包含以格式表示的坐标在提供的问题中指定。方向服务代码已改编来自this example

示例

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

Demo

Answer 2

您可能想查看此页面 https://developers.google.com/maps/documentation/roads/snap

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

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

Google地图从给定坐标绘制路线

2 个答案: