angular - 在 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
    };

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

  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