从地图旋转 svg 不起作用

雷南罗德里格斯

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

我是这样做的:

  1. 首先,我像这样初始化谷歌地图变量:

    marker: any = new google.maps.Marker;
    
  2. 然后我运行函数来创建这样的标记:

    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));
    }
    
  3. 当我移动到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);
      }
    }
    

它从地图上开始,但没有解决任何问题,就像图像中一样:

谷歌地图图像

我的愿望是让巴士穿越折线

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

我正在 angular 5 中开发并使用谷歌地图 API 来创建和管理我的地图(标记、折线等),真正的目标是让公共汽车跟随折线并在它这样做时变得红润。我已经尝试使用 png 图像、SVG 开发这种机制,但没有一个能够在图像中应用旋转。

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

舒克辛伊万
  1. 标记图标不能旋转。使用Symbol该(文档),它所需的属性path,只需直接通过SVG路径作为一个字符串,而不是一个文件。

  2. 使用 css 旋转图像。

像这样。请记住,图标可以有不同的“零”角度。您未旋转的巴士可以指向北方、东方等,因此您只需添加或减去初始角度。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章