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

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

我可以使它紧密执行我想要做的唯一方法是通过将planeSymbol实例和marker实例添加到

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>

最佳答案

就像处理坐标一样，从DOM中读取标题，并使用它来设置图标的rotation属性。

// read the value for the heading from the DOM
var gettrueHeadingEl = document.getElementById('trueHeading');
getTrueHeading = parseFloat(gettrueHeadingEl.innerHTML);

// set the rotation property of the icon
marker.setPosition(new google.maps.LatLng(getLat, getLong));
var newIcon = marker.getIcon()
newIcon.rotation = getTrueHeading;
marker.setIcon(newIcon);

proof of concept fiddle
代码段:

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: 8,
      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,
    anchor: new google.maps.Point(400, 400)
  };


  var marker = new google.maps.Marker({
    id: "player",
    position: usersLocation,
    map: map,
    title: 'Username',
    icon: planeSymbol

  });

  //
  var polyline = new google.maps.Polyline({
      map: map,
      path: []
    })
    // 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,
      anchor: new google.maps.Point(400, 400)

    };

    if (marker && marker.setPosition) {
      marker.setPosition(new google.maps.LatLng(getLat, getLong));
      var newIcon = marker.getIcon()
      newIcon.rotation = getTrueHeading;
      marker.setIcon(newIcon);
      polyline.getPath().push(marker.getPosition());
    } else {
      marker = new google.maps.Marker({
        position: usersLocation,
        map: map,
        title: 'Username',
        icon: planeSymbol

      });
    }
    map.panTo(new google.maps.LatLng(getLat, getLong));

  }, 3000);


  marker.setMap(map);
  //  moveAircraft(map, marker);

}
var angle = 0;

function simulateMovement() {
  angle += 1;
  var newPt = google.maps.geometry.spherical.computeOffset(new google.maps.LatLng(42, -72), 100000, angle);
  document.getElementById('latitude').innerHTML = newPt.lat();
  document.getElementById('longitude').innerHTML = newPt.lng();
  var heading = angle + 90;
  document.getElementById('trueHeading').innerHTML = heading;
}
setInterval(simulateMovement, 1000);
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="latitude">42</div>
<div id="longitude">-72</div>
<div id="trueHeading">90</div>
<div id="map"></div>

关于javascript - 使用Google Maps API旋转SVG符号以匹配飞机航向，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34361764/