使用 Google Maps API 旋转 SVG 符号以匹配飞行方向

Question

我一直在尝试旋转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>

- user3352243

---

可能有关的问题（沿折线动画播放SVG飞机符号）：使用SVG路径在折线上创建自定义符号。 - geocodezip

Answer 1

像获取坐标一样从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);

概念验证 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>

- geocodezip