如何修改Angular组件map-directions-renderer的PolylinesOptions配置

解决步骤 #

• 修正@ViewChildren的查询类型
  你之前的查询类型写错了，<map-directions-renderer>是Angular组件，不是原生DOM元素，所以不能用ElementRef接收，要直接查询组件实例：

// 首先引入MapDirectionsRenderer
import { MapDirectionsRenderer } from '@angular/google-maps';

@ViewChildren(MapDirectionsRenderer) directionsRenders: QueryList<MapDirectionsRenderer>;

每个组件实例都内置了原生的Google Maps DirectionsRenderer实例，通过renderer.directionsRenderer即可访问。

• 给每个渲染器使用独立的配置对象
  你当前所有渲染器绑定同一个directionsRenderOption变量，一方面无法给不同路线设置不同样式，另一方面对象引用不变的情况下，Angular的变更检测不会触发配置更新。你可以把路径数组改造为带独立配置的结构：

interface RouteItem {
  directionResult: google.maps.DirectionsResult;
  renderOption: google.maps.DirectionsRendererOptions;
}

// 初始化每个路线的独立配置，不同路线可以自定义polylineOptions区分样式
routeItems: RouteItem[] = [
  // 示例：两个路线用不同颜色
  {
    directionResult: 你的第一个路径结果,
    renderOption: {
      draggable: false,
      suppressInfoWindows: true,
      markerOptions: {
        draggable: false,
        clickable: false,
      },
      polylineOptions: {
        strokeColor: '#9966ff',
        strokeOpacity: 0,
        icons: [{
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillOpacity: 1,
            scale: 3
          },
          offset: '0',
          repeat: '1px'
        }],
      }
    }
  },
  {
    directionResult: 你的第二个路径结果,
    renderOption: {
      // 其他配置同上，仅修改polyline样式做区分
      polylineOptions: {
        strokeColor: '#66ff99',
        strokeOpacity: 0,
        icons: [{
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillOpacity: 1,
            scale: 3
          },
          offset: '0',
          repeat: '1px'
        }],
      }
    }
  }
]

对应模板修改为：

<google-map
  #map 
  height="100%" 
  width="null" 
  [options]="mapOptions"
  (tilesloaded)="tilesLoaded()"
  *ngIf="itemList.length != 0"
>
  <map-directions-renderer 
    *ngFor="let item of routeItems"
    [options]="item.renderOption" 
    [directions]="item.directionResult" 
  >
  </map-directions-renderer>
</google-map>

还要注意你原来的配置代码里markerOptions闭合后多了一个多余的分号，会导致语法异常，需要删除。

• 手动触发polyline配置更新
  如果是动态修改已渲染路线的样式，Angular组件可能不会自动同步深层的polylineOptions变更，你可以手动调用原生实例的setOptions方法强制更新：

// 比如在需要更新样式的时机调用
updateRouteStyles() {
  this.directionsRenders.forEach((renderComp, index) => {
    const nativeRenderer = renderComp.directionsRenderer;
    nativeRenderer.setOptions(this.routeItems[index].renderOption);
  });
}

配置失效原因说明 #

Angular的<map-directions-renderer>组件对输入的options做浅比较，markerOptions的属性变更如果是直接替换整个markerOptions对象会被检测到，但如果是修改polylineOptions的深层属性，且配置对象的引用没有变化，组件不会触发重新渲染，手动调用原生API可以绕开这个限制。

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