javascript - 每 x 秒刷新一次数据后无法动态更新图标图像

Question

我目前正在每隔 x 秒动态更新标记，这里数据更新和放置标记，但这里的问题是数据何时根据图标更新，图像未在我放置的位置更新

0== red
1== green
2== orange 

here this.markerIcon = this.mapData[i].OrderState;  this is my icon color status 

下面是我获取动态数据的代码

if(this.mapData!=null && this.mapData.length>0){

          for (var i = 0; i < this.mapData.length;i++){
            this.latlng = {lat: parseFloat(this.mapData[i].latitude), lng: parseFloat(this.mapData[i].longitude)};

            this.markerName = this.mapData[i].Name; 

            this.markerIcon = this.mapData[i].OrderState;

            if (this.markerStore.hasOwnProperty(this.mapData[i].DriverId)) {

              if (this.markerIcon === "0") {
                this.iconDisplay = this.red;

              } else if (this.markerIcon === "1") {
                this.iconDisplay = this.green;

              } else if ( this.markerIcon === "2") {
                this.iconDisplay = this.orange;
              } else if (this.markerIcon === "3") {
                this.iconDisplay = this.building;
              }
              this.markerStore[this.mapData[i].DriverId].setPosition(this.latlng);
            } else {
              if (this.markerIcon === "0") {
                this.iconDisplay = this.red;

              } else if (this.markerIcon === "1") {
                this.iconDisplay = this.green;

              } else if ( this.markerIcon === "2") {
                this.iconDisplay = this.orange;
              } else if (this.markerIcon === "3") {
                this.iconDisplay = this.building;
              }

              var marker = new google.maps.Marker({
                position: this.latlng,
                map:this.mapObject,
                icon:this.iconDisplay
              });
              this.markerStore[this.mapData[i].DriverId] = marker;
            }
          }
        }

      }

    });

当我按下重新加载页面时，图标颜色发生了变化，我不知道出了什么问题

Json数据:

{
"Data": [
{
"DriverId": "138",
"Name": "A",
"OrderState": "1",
"latitude": "35.20714666666667",
"longitude": "55.32000000001"
},
{
"DriverId": "4",
"Name": "T",
"OrderState": "2",
"latitude": "35.7828333333337",
"longitude": "58.764833333334"
},
{
"DriverId": "7",
"Name": "AL",
"OrderState": "2",
"latitude": "35.677546666666665",
"longitude": "85.27641833333334"
},
{
"DriverId": "111",
"Name": "Waseem.",
"OrderState": "0",
"latitude": "25.199691666666663",
"longitude": "55.249858333333336"
},
{
"DriverId": "5",
"Name": "D",
"OrderState": "0",
"latitude": "35.19730666666667",
"longitude": "65.56744999999999"
},
{
"DriverId": "137",
"Name": "G",
"OrderState": "1",
"latitude": "36.240411666666667",
"longitude": "65.27219333333334"
}
],
"ErrorCode": "201 - Success",
"Message": "Success",
"Status": true
}

这里基于订单状态值 im 在标记图像中更改 0 == 红色和 1 == 绿色和 2 == 橙色每 10 秒更新一次数据，0 也可能变为 1 或 2

Answer 1

如果标记存在而不是替换数组中的元素，则删除旧标记并添加新标记。

if (this.mapData[i].DriverId in this.markerStore) {
     this.markerStore[this.mapData[i].DriverId].setMap(null);
}
// create here the new one as you did before