旋转angular-google-maps中的标记

Question

我正在尝试使绘图成为车辆移动的路径。我在angular中使用@ agm / core angular-google-maps。我在文档中找不到任何有助于旋转标记的内容。

iconUrl属性没有提供足够的支持。我试过了 ： -

     this.iconUrl = {
        path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145  5,90 95,90 z',
        scale: 6,
        fillColor: "red",
        fillOpacity: 0.8,
        strokeWeight: 2,
        rotation: 150 //this is how to rotate the pointer
    };

上面的代码在地图上没有显示任何标记。

  this.iconUrl = {
        url: 'images/car.svg',
        scale: 6,
        rotation: 150
    };

上面的代码显示了标记，但没有缩放或旋转它。

我想旋转标记。有什么可能的方法来实现这一目标？有没有人使用@agm实现此目的。

Answer 1

您无法使用 agm-marker 和 iconUrl 属性旋转标记。我建议使用 agm-overlay。这样你就可以用“img src”设置图标并使用内联css“样式”来旋转图标。您可以在这里查看我的工作示例：

 <agm-overlay *ngFor="let marker of markers" [latitude]="marker.latitude" [longitude]="marker.longitude">
    <div>
      <img *ngIf="marker.type === 'BT'" src='./assets/images/bt.png' style="transform: rotate({{marker.rotation}}deg);
        width: 60%;
      height: 60%;">
      <img *ngIf="marker.type === 'RTMS'" src='./assets/images/test.png' style="transform: rotate({{marker.rotation}}deg);
      width: 5%;
      height: 5%;">
    </div>
  </agm-overlay>

例子