从 Google Maps API 响应呈现 Google Maps

Question

我正在尝试在 A 点和 B 点之间绘制一条路线。我一直在关注以下链接：

https://developers.google.com/maps/documentation/directions/intro

以下链接是如何获取蒙特利尔和多伦多之间路线的示例。 https://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&key=API_KEY

我在运行此 URL 时收到 JSON 响应。我已经检查了很多，但无法弄清楚如何将此响应中的详细信息呈现到地图中。有人可以帮我指出正确的方向吗？

我已经检查了这个链接： https://developers.google.com/maps/documentation/javascript/examples/directions-simple

我正在使用 alexpechkarev/google-maps 包和 Laravel 来构建这个解决方案。我已经从包中运行了方向服务，它返回的 JSON 对象类似于 google maps api guide 中的链接给出的对象。

感谢任何帮助。

谢谢。

Answer 1

这是一般配方：

您需要从 JSON 响应中提取路线的坐标。 这些在 2 个详细级别的响应中。

1. 沿路主要交叉口的显式坐标。您可以用简单的英语阅读这些内容，并且可以将它们提取为关联数组成员。

2. 除了上述之外，还有一个编码字符串，其中包含更多(lat, lon) 交叉点之间的点对。您必须对这些进行解码，并且有可用的算法。 （几周前我做了一个 PHP 版本，链接如下）。顺便说一句，第二个数组的原因是这样的：想象一条蜿蜒曲折的乡间小路，没有交叉路口……这个数组将跟随道路曲线，给出在 1 中找不到的 (lat,lon) 对。

3)。构建一个坐标数组（如果需要更精细的细节，从 1 开始，包括 2）。

4) 然后使用下面的代码（从下面的链接窃取并稍作调整：https://developers.google.com/maps/documentation/javascript/examples/polyline-simple:) 向您展示如何在地图上绘制线条。

<script>

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 0, lng: -180},
          mapTypeId: 'terrain'
        });

        var routeCoordinates = [    // put your array here
          {lat: 37.772, lng: -122.214},
          {lat: 21.291, lng: -157.821},
          {lat: -18.142, lng: 178.431},
          {lat: -27.467, lng: 153.027}
        ];
        var routePath = new google.maps.Polyline({
          path: routesCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',    // adjust line colour
          strokeOpacity: 1.0,        // adjust line opacity  
          strokeWeight: 2            // adjust line thickness
        });

        routePath.setMap(map);
      }
    </script>

google 链接中的示例向您展示了如何处理涉及的 HTML 等问题。

现在对折线点进行解码：

Get itinerary latitudes & longitude from google maps with PHP

上面的函数decodePolylinePoints($pointsString)返回一个(lat,lons)的数组，你可以用它来绘制路线。

您需要研究JSON 来理解代码，虽然它看起来很乱但完全符合逻辑。将JSON 放入VSCode 之类的编辑器中，它将以正确的格式显示。