在网站上的谷歌地图中显示自定义路线

Question

我已经知道如何在我的网站上集成谷歌地图框架来固定特定地址。这在谷歌地图API文档中有很好的记录。

然而，我目前有一位客户，他组织了一种有多种路线的步行比赛。这位客户希望通过使用某种谷歌地图iframe在他的网站上显示这些步行的不同路线。

谷歌搜索"；网站Google Maps API上的定制路线"；仅显示显示如何在谷歌地图应用程序中创建自定义路线的结果。

所以，我的问题是：

• 是否可以在谷歌地图iframe中显示自定义路线
• 路线是固定的，因此用户没有任何输入
• 我基本上只是想在谷歌地图中绘制一些路线，并使用iframes在我的网站上显示这些路线
• 如果谷歌地图无法在您的网站上显示自定义路线，是否有其他API或解决方案

这可能吗？谢谢

Answer 1

不带GoogleMap Embed API

您无法在GoogleMap iframe上显示自定义路线。GoogleMap iframe允许您在不使用javascript的情况下显示地图，它是相对于GoogleMap Embed API的。API的所有可能性都记录在这里。注意，当你说：

这在谷歌地图API文档中有很好的记录。

它是对GoogleMap Javascript API的引用，而不是对GoogleMap Embed API的引用。

是，使用GoogleMap Javascript API

它存在另一个API解决方案，称为GoogleMap Javascript API。通过使用它，如果要在地图上显示自定义管线，可以使用自定义多段线。您只需要选择自定义路线的航路点的所有latLng对象，并设置一条多段线，如下所示：

// Coordonates of your route
const customRouteCoordonates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
// ... and a lot of more to be more precise
];
//Your map
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: { lat: 0, lng: -180 },
mapTypeId: "terrain",
});
//Set up your polyline
const routePath= new google.maps.Polyline({
path: customRouteCoordonates ,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
routePath.setMap(map);
}