使用Google Maps API旋转SVG符号以匹配飞机航向

我一直在尝试旋转Google Maps API SVG飞机符号,以便在每次符号移动时显示飞机的正确航向.它最初加载显示正确的标题 - 我似乎无法弄清楚如何将其更新到新标题.我花了2天时间尝试并且非常失败.我以为我可以通过添加rotatation: getTrueHeading而不是运气来简单地改变它.

我可以通过将planeSymbol实例和标记实例添加到其中来实现我想要的唯一方法

setInterval(function() {}, 3000); 

朝向底部的功能,但这(显然)重复了飞机图标,看起来非常低效.

我很欣赏下面的代码不是很好,所以请原谅它的质量 - 仍在进行中,我也是javascript的新手.

如果有人能提供帮助,我将非常感激.

function initMap() {
		
	var getLatEl = document.getElementById('latitude');
	getLat = parseFloat(getLatEl.innerHTML);
	
    var getLongEl = document.getElementById('longitude');
	getLong = parseFloat(getLongEl.innerHTML);	
	
    var gettrueHeadingEl = document.getElementById('trueHeading');
	getTrueHeading = parseFloat(gettrueHeadingEl.innerHTML);
			
	if (isNaN(getLat) == true && isNaN(getLong) == true) {	

		  // Show default location	  
		  var usersLocation = {lat: 33.949484, lng: -118.430566};
		  var map = new google.maps.Map(document.getElementById('map'), {
			zoom: 3,
			center: usersLocation,
			mapTypeId: google.maps.MapTypeId.TERRAIN
		  });		  
		  var image = 'assets/images/icons/aircraft_marker_map_none_16x16.png';
	  
	}else if (isNaN(getLat) == false && isNaN(getLong) == false) {
	
		  // Show flight sim location
		  var usersLocation = {lat: getLat, lng: getLong};
		  var map = new google.maps.Map(document.getElementById('map'), {
			zoom: 14,
			center: usersLocation,
			mapTypeId: google.maps.MapTypeId.TERRAIN
		  });			  
		  var image = 'assets/images/icons/aircraft_marker_map_16x16.png';
	  
	}
	
		 var planeSymbol = {
			path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
			scale: 0.0333, 
			strokeOpacity: 1,
			color: 'black',
			strokeWeight: 1,
			rotation: getTrueHeading
		 };	
		 
		
		var marker = new google.maps.Marker({
			id: "player",
			position: usersLocation,
			map: map,
			title: 'Username',
			icon: planeSymbol
	
		 });	 
		 
		 //
		 
	  	// Move players aircraft
		setInterval(function() {
			
		var getLatEl = document.getElementById('latitude');
		getLat = parseFloat(getLatEl.innerHTML);
		var getLongEl = document.getElementById('longitude');
		getLong = parseFloat(getLongEl.innerHTML);	
	var gettrueHeadingEl = document.getElementById('trueHeading');
	getTrueHeading = parseFloat(gettrueHeadingEl.innerHTML);
		
		 var planeSymbol = {
			path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
			scale: 0.0333, 
			strokeOpacity: 1,
			color: 'black',
			strokeWeight: 1,
			rotation: getTrueHeading
		 };	
		 
		
		var marker = new google.maps.Marker({
			position: usersLocation,
			map: map,
			title: 'Username',
			icon: planeSymbol
	
		 });		
		
		marker.setPosition( new google.maps.LatLng( getLat, getLong ) );	
		map.panTo( new google.maps.LatLng( getLat, getLong ) );

		}, 3000);	
		
	  
	}
	
	marker.setMap( map );
    moveAircraft( map, marker );