Angular 从贴图旋转svg不起作用

我试图将

旋转

应用于

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: 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));
}

当我移动新位置的

标记时：

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);
  }
}

它从地图上开始，但不解决任何问题，就像在图像中一样：

我的愿望是公共汽车能通过多段线

有关该项目的更多详细信息：

我正在angular 5中开发，并使用google maps API创建和管理我的地图（标记、多段线等），真正的目标是让巴士沿着多段线行驶，并在行驶时发出红光。我已经尝试过用png图像SVG开发这种机制，但是没有一个能够在图像中应用旋转

我在互联网上搜索了一些东西，但是我找到的东西不能帮助我解决问题，我看到了用css运行图像的可能性，但是所有的应用程序都与jquery相关，没有一个与typescript相关，因此我无法应用此选项来检查总线是否在多段线上移动

标记图标不能旋转。使用

Symbol

，它具有必需的属性

path

，只需将svg路径直接作为字符串传递，而不是作为文件传递

使用css旋转图像

我喜欢这样。记住，图标可以有不同的“零”角。你的巴士不旋转，可以直接向北，向东等，所以你只需增加或减少初始角度

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

标记图标不能旋转。使用

Symbol

，它具有必需的属性

path

，只需将svg路径直接作为字符串传递，而不是作为文件传递

使用css旋转图像

我喜欢这样。记住，图标可以有不同的“零”角。你的巴士不旋转，可以直接向北，向东等，所以你只需增加或减少初始角度

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

---

我有多个标记，需要旋转它们。如果我一个接一个地添加它们，就可以访问DOM中最新的标记，并分配一个属性供以后访问。但是如果我把它们添加到一个循环中，我就不能得到最新的一个，因为异步添加。。我如何处理这个问题。@freezer简单的方法是使用不同的URL作为图标。只需在图标url中添加

？id=IDhere

，您就可以通过

$（'img[src=“'+iconurl+'？id='+id+''']'）访问它我有多个标记，需要旋转它们。如果我一个接一个地添加它们，就可以访问DOM中最新的标记，并分配一个属性供以后访问。但是如果我把它们添加到一个循环中，我就不能得到最新的一个，因为异步添加。。我如何处理这个问题。@freezer简单的方法是使用不同的URL作为图标。只需在图标url中添加
？id=IDhere
，您就可以通过
$（'img[src=“'+iconurl+'？id='+id+''']'）访问它