我正在尝试将 arotation
应用于 svg
类型图标,但它没有正确应用,实际上图标中没有任何时尚。
我是这样做的:
首先,我像这样初始化谷歌地图变量:
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);
}
}
它从地图上开始,但没有解决任何问题,就像图像中一样:
我的愿望是让巴士穿越折线
有关该项目的更多详细信息:
我正在 angular 5 中开发并使用谷歌地图 API 来创建和管理我的地图(标记、折线等),真正的目标是让公共汽车跟随折线并在它这样做时变得红润。我已经尝试使用 png 图像、SVG 开发这种机制,但没有一个能够在图像中应用旋转。
我在互联网上搜索了一些东西,但是我发现的东西并不能帮助我解决问题,我看到了用 css 运行图像的可能性,但所有的应用程序都与 jquery 相关,没有一个与打字稿有关,所以我无法应用此选项来检查是否有或没有总线在折线上移动。
标记图标不能旋转。使用Symbol
该(文档),它所需的属性path
,只需直接通过SVG路径作为一个字符串,而不是一个文件。
使用 css 旋转图像。
像这样。请记住,图标可以有不同的“零”角度。您未旋转的巴士可以指向北方、东方等,因此您只需添加或减去初始角度。
$('img[src="' + iconurl + '"]').css({
'transform': 'rotate(' + (heading - initial) + 'deg)'
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句