google-maps - 从 Google map API 响应渲染 Google map

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 响应。我已经检查了很多，但无法弄清楚如何将此响应的详细信息渲染到 map 中。有人可以帮我指出正确的方向吗？

我已经检查过此链接: https://developers.google.com/maps/documentation/javascript/examples/directions-simple

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

感谢任何帮助。

谢谢。

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 :)，向您展示如何在 map 上绘制线条。

<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 等编辑器中，它将以正确的格式显示。