Javascript 基于标题更新的图标旋转保持在同一标题中

Javascript 基于标题更新的图标旋转保持在同一标题中,javascript,google-maps,Javascript,Google Maps,Hello bellow是令人不快的代码片段。JSON文件中有一个value.track,它使用标记旋转设置地图标记图标。问题是图标旋转与第一次告知的保持一致。也就是说,当第一次加载的航向是360,然后飞机转向180,它将不会旋转图标以匹配航向,除非我刷新页面。我想这可以用一个“var”在某些地方修复,但不确定在哪里。我很抱歉,如果这不是很清楚,我是非常新的Java脚本。换句话说,标记位置更新,但标记旋转不更新 var infoWindows = {}; var markers = {};

Hello bellow是令人不快的代码片段。JSON文件中有一个value.track,它使用标记旋转设置地图标记图标。问题是图标旋转与第一次告知的保持一致。也就是说,当第一次加载的航向是360,然后飞机转向180,它将不会旋转图标以匹配航向,除非我刷新页面。我想这可以用一个“var”在某些地方修复,但不确定在哪里。我很抱歉,如果这不是很清楚,我是非常新的Java脚本。换句话说,标记位置更新,但标记旋转不更新

 var infoWindows = {};
  var markers = {};
 function getIconForPlane(value) {
    var r = 255, g = 255, b = 0;
    return {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 5,
        fillColor: 'rgb('+r+','+g+','+b+')',
        fillOpacity: 0.9,
        rotation: value.track
        };
    }

function initialize() {

var mapOptions = {
    center: new google.maps.LatLng(-36.363, 175.044),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), 
 mapOptions);
window.setInterval(readData, 1000);
}

function text(value) {
return '<b>Speed: </b> ' + value.speed + ' <br><b>Flight: </b>' + 
value.flight 
+' <br><b>HEX: </b>' + value.hex + '<br><b>Altitude: </b>' + value.altitude 
 + 
 '<br><b>Vertical Rate: </b>' + value.vert_rate +'<br><b>Last radar contact: 
 </b>' +value.seen +'<b>s</b>';
window.setInterval(text, 1000);
}

 function createInfoWindow(value, marker, map) {
 var iw = new google.maps.InfoWindow({
 content: text(value)
 });
 google.maps.event.addListener(marker, 'click', function() {
   iw.open(map, marker);
 });
return iw;
}

function readData() {
 $.getJSON
 ('https://crossorigin.me/http://radar1.ddns.net:3080/data/aircraft.json
    ', function(data) {
$.each(data.aircraft, function(i, value) {
  var myLatlng = new google.maps.LatLng(value.lat, value.lon, value.flight, 
  value.altitude);
  if (markers[value.hex]) {
    markers[value.hex].setPosition(myLatlng);
    console.log("moving marker for " + value.hex);
    infoWindows[value.hex].setContent(text(value));
     } else {
    // create new
    markers[value.hex] = new google.maps.Marker({
      position: myLatlng,
      icon: getIconForPlane(value),
      map: map,
      title: "Callsign: " + value.flight + ", Altitude: " + value.altitude
    });
    console.log("creating marker for " + value.hex);
    infoWindows[value.hex] = createInfoWindow(value, markers[value.hex] 
 ,map)
  }
   });
  });
}
var infoWindows={};
var标记={};
函数getIconForPlane(值){
var r=255,g=255,b=0;
返回{
路径:google.maps.SymbolPath.FORWARD\u CLOSED\u箭头,
比例:5,
fillColor:'rgb('+r+','+g+','+b+'),
填充不透明度:0.9,
旋转:value.track
};
}
函数初始化(){
变量映射选项={
中心:新的google.maps.LatLng(-36.363175.044),
缩放:5,
mapTypeId:google.maps.mapTypeId.ROADMAP
}; 
map=new google.maps.map(document.getElementById(“map_canvas”),
地图选项);
设置间隔(读取数据,1000);
}
函数文本(值){
返回“速度:”+value.Speed+”
航班:'+ 价值飞行 +“
十六进制:”+value.HEX+”
海拔:“+value.althip + “
垂直速率:”+value.vert_Rate+”
最后一次雷达接触: '+value.seen+'s'; 设置间隔(文本,1000); } 函数createInfoWindow(值、标记、映射){ var iw=new google.maps.InfoWindow({ 内容:文本(值) }); google.maps.event.addListener(标记'click',函数(){ iw.打开(地图、标记); }); 返回iw; } 函数readData(){ $.getJSON ('https://crossorigin.me/http://radar1.ddns.net:3080/data/aircraft.json ,函数(数据){ 美元每架(数据、飞机、功能(i、值){ var mylatng=new google.maps.LatLng(value.lat、value.lon、value.flight、, 数值(海拔高度); if(标记[value.hex]){ 标记[value.hex].setPosition(myLatlng); console.log(“移动“+value.hex”标记); infoWindows[value.hex].setContent(text(value)); }否则{ //创造新的 markers[value.hex]=新的google.maps.Marker({ 职位:myLatlng, 图标:getIconForPlane(值), 地图:地图, 标题:“呼号:“+value.flight+”,高度:“+value.altime” }); log(“为“+value.hex”创建标记); infoWindows[value.hex]=createInfoWindow(值,标记[value.hex] ,地图) } }); }); }
更新标记位置时更新标记的图标:

if (markers[value.hex]) {
  markers[value.hex].setPosition(myLatlng);
  markers[value.hex].setIcon(getIconForPlane(value));
  infoWindows[value.hex].setContent(text(value));
} else {
  // create new
  markers[value.hex] = new google.maps.Marker({
    position: myLatlng,
    icon: getIconForPlane(value),
    map: map,
    title: "Callsign: " + value.flight + ", Altitude: " + value.altitude
  });
  infoWindows[value.hex] = createInfoWindow(value, markers[value.hex],map);
}

(您可能还需要更新标题,因为海拔可能会发生变化)

如果标记已经存在,您的代码只会更改位置,听起来你也想更新旋转。@geocodezip是的,这正是我想做的,谢谢我会编辑这个问题。你为什么不修改代码来解决这个问题?@geocodezip不知道我为什么在这里放:)可能重复非常感谢@geocodezip高度已经自动更新了,但无论如何谢谢。