Javascript 谷歌地图显示来自json的路由

下一个问题是显示来自基本JSON的路由

我在后端执行此调用：

卷曲到https://maps.googleapis.com/maps/api/directions/json

我将响应json发送回前端

在前端，我尝试渲染路由只是为了可视化，为什么我不使用GoogleV3API来获取RouterResponse对象是因为我不想复制与后端相同的配置，并在frontent中转换为requestObejct

我尝试基于googleapi的后端json创建RouterResponse json：

问题是我看到了起点和终点标记+腿部点，但没有看到直线：

我应该怎么做才能有一个正确的显示路线？ 与流程代码类似：

directionsService.route(request, function(response, status) {
    if (status === 'OK') {
        console.log(response);
        directionsDisplay.setDirections(response);
    } else {
        console.log('Directions request failed due to ' + status);
    }
})

---

如果您向Directions webservice发出后端请求，并且将完整响应传递给前端，则需要处理结果，使其成为有效的DirectionResult对象。我会这样做：

if (response.status === 'OK') {


  var bounds = new google.maps.LatLngBounds(response.routes[0].bounds.southwest, response.routes[0].bounds.northeast);
  response.routes[0].bounds = bounds;

  response.routes[0].overview_path = google.maps.geometry.encoding.decodePath(response.routes[0].overview_polyline.points);


  response.routes[0].legs = response.routes[0].legs.map(function (leg) {
    leg.start_location = new google.maps.LatLng(leg.start_location.lat, leg.start_location.lng);
    leg.end_location = new google.maps.LatLng(leg.end_location.lat, leg.end_location.lng);
    leg.steps = leg.steps.map(function (step) {
      step.path = google.maps.geometry.encoding.decodePath(step.polyline.points);
      step.start_location = new google.maps.LatLng(step.start_location.lat, step.start_location.lng);
      step.end_location = new google.maps.LatLng(step.end_location.lat, step.end_location.lng);
      return step;
    });
    return leg;
  });

  directionsDisplay.setDirections(response);
}

基本上，当您使用该类时，库会代表您在两个参与者之间进行转换：

路由服务（后端）负责为“如何从a到B”的问题提供路由解决方案？它不会对您使用其结果的方式进行任何假设

绘图服务（前端）负责向用户展示通用（但详细）路线的视觉表示。只要提供正确的结构，它就不会对从何处获得路由解决方案做出任何假设（它需要一个实例）

当您选择使用curl或任何其他服务器端库来请求方向时，您填补了将前端对象转换为正确URL编码的空白。现在您需要将back转换为的实例

---

即使JSON结果主要是一个对象，渲染器也不会也不应该假设普通对象应用于实例路径、路由、位置或支腿。

相关问题：您好，在您的建议中，正确的回答是使用从

DirectionService.route返回的javascript google对象，因为我必须手动创建该对象，我的问题是如何正确创建该对象？您尝试了什么？这样做会产生什么错误？我没有错误，我只想从
https://maps.googleapis.com/maps/api/directions/json
并显示路线，而不仅仅是显示步骤点谢谢，效果很好，还有一个问题，为什么路线有点而不是简单的线？我已经在我的示例中或您的示例中输入了要驱动的travelModel
请求：{travelModel:google.maps.TravelMode.DRIVING}
？也许您需要修改渲染器选项这是我的渲染选项：
{suppressInfoWindows:true，suppressMarkers:true，suppressBillingLayer:true，polylineOptions:{fillColor:'#FF0000'，strokeOpacity:1.0，strokeWeight:10}，travelMode:google.maps.travelMode.DRIVING}
并且不显示线条，更多的是，颜色不适用，我做错了什么？好的，但我如何做连续线而不是点线？与多段线对象类似，请确保未交换lat/lng
if (response.status === 'OK') {


  var bounds = new google.maps.LatLngBounds(response.routes[0].bounds.southwest, response.routes[0].bounds.northeast);
  response.routes[0].bounds = bounds;

  response.routes[0].overview_path = google.maps.geometry.encoding.decodePath(response.routes[0].overview_polyline.points);


  response.routes[0].legs = response.routes[0].legs.map(function (leg) {
    leg.start_location = new google.maps.LatLng(leg.start_location.lat, leg.start_location.lng);
    leg.end_location = new google.maps.LatLng(leg.end_location.lat, leg.end_location.lng);
    leg.steps = leg.steps.map(function (step) {
      step.path = google.maps.geometry.encoding.decodePath(step.polyline.points);
      step.start_location = new google.maps.LatLng(step.start_location.lat, step.start_location.lng);
      step.end_location = new google.maps.LatLng(step.end_location.lat, step.end_location.lng);
      return step;
    });
    return leg;
  });

  directionsDisplay.setDirections(response);
}