Я пытался повернуть символ самолета SVG API Карт Google, чтобы он отображал правильный курс самолета при каждом перемещении символа. Первоначально он загружается, показывая правильный заголовок - я просто не могу понять, как обновить его до нового заголовка. Я провел 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 );	

    </script>
    
    <script src="https://maps.googleapis.com/maps/api/js?key=APIKEYREMOVED&callback=initMap" async defer>
    </script>
	<!--/Google Map API -->   
    
	<!-- Move Aircraft to Flight Sim Location -->
	<script>
    function moveAircraft( map, marker ) {
        
        var getLatEl = document.getElementById('latitude');
        getLat = parseFloat(getLatEl.innerHTML);
        var getLongEl = document.getElementById('longitude');
        getLong = parseFloat(getLongEl.innerHTML);
        
        marker.setPosition( new google.maps.LatLng( getLat, getLong ) );
        map.panTo( new google.maps.LatLng( getLat, getLong ) );
    
    };
    </script>