Angular14+TypeScript项目如何禁用Google Maps JS API公交详情气泡？

我有一个基于TypeScript的Angular 14库，该库使用Google Maps JS API。希望禁用公交详情信息（绿色路径上的所有白色气泡），请问是否有可行方法？

示例代码片段：

directionsService
  .route({
    origin: { lat: 37.77, lng: -122.447 },
    destination: { lat: 37.768, lng: -122.511 },
    // 注：JavaScript允许通过方括号和字符串值访问常量属性
    travelMode: google.maps.TravelMode[selectedMode],
  })
  .then((response) => {
    directionsRenderer.setDirections(response);
  })
  .catch((e) => window.alert("路线请求失败：" + status));

解决方案 #

可以通过配置DirectionsRenderer的suppressTransitMarkers属性来隐藏公交路线上的站点标记（即你所说的白色气泡）。这个属性设为true时，会自动屏蔽公交路线中的所有站点标记。

修改后的代码示例：

// 为现有DirectionsRenderer实例设置配置
directionsRenderer.setOptions({
  suppressTransitMarkers: true
});

directionsService
  .route({
    origin: { lat: 37.77, lng: -122.447 },
    destination: { lat: 37.768, lng: -122.511 },
    travelMode: google.maps.TravelMode[selectedMode],
  })
  .then((response) => {
    directionsRenderer.setDirections(response);
  })
  .catch((e) => window.alert("路线请求失败：" + status));

如果是初始化DirectionsRenderer时直接配置，写法如下：

const directionsRenderer = new google.maps.DirectionsRenderer({
  suppressTransitMarkers: true,
  // 其他现有配置项...
});

内容的提问来源于stack exchange，提问作者Oscar TJ