在angular-google-maps中旋转标记

时间:2017-12-02 08:23:43

标签: angular angular-google-maps

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

1 个答案:

答案 0 :(得分:0)

您不能使用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