从谷歌地图 API 响应渲染谷歌地图

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 对象类似于谷歌地图 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：(，向您展示如何在地图上绘制线条。

<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>

谷歌链接中的示例向您展示了如何完成涉及的 HTML 等的一点点。

现在要对折线点进行解码

：使用PHP从谷歌地图获取行程纬度和经度

在上面的函数中，decodePolylinePoints($pointsString)返回一个可用于绘制路线的(lat,lons)数组。

你需要研究JSON来理解代码，虽然它看起来很混乱，但它是完全合乎逻辑的。将JSON放入VSCode等编辑器中，它将正确显示格式。