JavaScript - 根据数据

Question

我在浏览器的谷歌地图上显示了一些谷歌地图标记markers。我需要每隔几秒根据一些输入数据更改标记的颜色。可以通过标记（符号）的fillColor，strokeColor属性更改Google地图标记的颜色。

地方

 let places = [ 
    { name: "place1", placeId: 1, lat:19.29 , long: 72.85},
    { name: "place2", placeId: 2, lat:19.27 , long: 72.88},
];

需要用于更改标记颜色的数据如下所示，标记颜色需要根据val字段进行更改。请注意，placeId和data places属性相同。

数据

 let data = [ 
    { time: "11/22/16 10:00:00", placeId: 1, val: 33},
    { time: "11/22/16 10:00:10", placeId: 1, val: 12},
    { time: "11/22/16 10:00:30", placeId: 1, val: 78},
    { time: "11/22/16 10:00:00", placeId: 2, val: 7},
    { time: "11/22/16 10:00:10", placeId: 2, val: 28},
    { time: "11/22/16 10:00:20", placeId: 2, val: 94},
    { time: "11/22/16 10:00:30", placeId: 2, val: 46},
];

当您看到placeId 1＆amp;标记的标记颜色时2随时间的变化，即。每10分钟一次。我需要每隔10分钟通过改变标记的颜色来映射这个变化。

所以在我假设的app.js中，我从下面的内容开始

app.js

# create map and append to div #map
let map = new google.maps.Map(document.getElementById('map'), {zoom: 12});
# add markers
for(let place of places){
    let latLng = new google.maps.LatLng(place.lat, place.long);
    let marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: { path: google.maps.SymbolPath.CIRCLE,
                scale: 2,
                fillColor: `Crimson`,
                strokeColor: `Crimson`                          
             }
});

此时我有一张带有两个标记的地图。现在我需要根据'val`每2秒更改一次这些标记的颜色。

• 在t = 0时，根据val
处的11/22/16 10:00:00为每个标记着色
• 在t = 2s时，根据val
处的11/22/16 10:00:10为每个标记着色
• 在t = 4s时，根据val
处的11/22/16 10:00:20为每个标记着色
• 在t = 8s时，根据val
处的11/22/16 10:00:30为每个标记着色

如果特定时间记录不存在val，则回退默认颜色

这里是我被卡住的地方，我应该每2秒使用一次类似setInterval的东西，每2秒根据值重新绘制具有适当颜色的标记吗？

还有办法从某个调色板中选择颜色（如R中的terrain.gradient），根据val设置颜色吗？

jsfiddle here