在 angular-google-maps 中旋转标记

Question

我试图使情节成为车辆移动的路径。我在角度使用@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>

Example