Question

我正在尝试将rotation应用于svg类型的图标，但它没有正确应用，实际上图标中没有任何时尚。

我这样做：

首先我正在初始化google maps变量，如下所示：
```
marker: any = new google.maps.Marker;
```

然后我运行该函数来创建这样的标记：

createMarker (location) {
  if (this.marker) {
    this.marker.setMap (null);
  }

  this.marker.setPosition (new google.maps.LatLng (location.coords.latitude, location.coords.longitude));
  this.marker.setMap (this.map);

  const icon = {
    url: 'assets / bus.svg',
    anchor: new google.maps.Point (0, 0),
    scaledSize: new google.maps.Size (32, 32)
  };

  this.marker.setIcon (icon);
  this.map.setCenter (new google.maps.LatLng (location.coords.latitude, location.coords.longitude));
}

当我移动marker来到新位置时，我会这样做：

moveMarker (location) {
  if (this.marker) {
    const currentPos = this.marker.getPosition ();
    const nextPos = new google.maps.LatLng (location.coords.latitude, location.coords.longitude);
    const duration = this.calcMoveDuration (location.distanceFilter, location.coords.speed);

    console.log ('currentPos', currentPos)
    console.log ('next', nextPos)

    let fraction = 0;
    const steps = 30;
    const fractionStep = 1 / steps;
    let animateTimer = setInterval (() => {
      fraction + = fractionStep;
      const interpolate = google.maps.geometry.spherical.interpolate (currentPos, nextPos, fraction);
      const icon = {
        url: 'assets / bus.svg',
        scaledSize: new google.maps.Size (32, 32),
        anchor: new google.maps.Point (0, 0),
        rotation: 50
      };
      this.marker.setIcon (icon);

      if (fraction> = 1.0)
        clearInterval (animateTimer);
        animateTimer = null;
      }
    }, duration / steps);
  }
}

它从地图开始，但没有像图像中那样解决任何问题：

我希望公共汽车能够越过折线

有关该项目的更多详情：

我正在开发角度5并使用谷歌地图API来创建和管理我的地图（标记，折线等），真正的目标是让公交车跟随折线并使其变得红润。我已经尝试用png图像SVG开发这个机制，但它没有给出在图像中应用旋转。

我在互联网上搜索了一些东西但是我找到的东西不能帮我解决问题，我看到有可能用css运行图像但是所有的应用程序都与jquery有关，没有一个用打字稿，所以我是无法应用此选项来检查是否有公交车在折线上移动。

Answer 1

无法旋转标记图标。使用Symbol表示它（docs），它需要属性path，只需将svg路径直接作为字符串传递，而不是作为文件传递。
使用css旋转图像。

$('img[src="' + iconurl + '"]').css({
     'transform': 'rotate(' + (heading - initial) + 'deg)'
});

从地图中旋转svg不起作用

1 个答案: