Javascript从数据动态创建图像/图标(标记)

Javascript dynamically create image/icon (marker) from data

本文关键字：图标 标记 图像 数据 动态 创建 Javascript      更新时间：2023-09-26

我想在一个网站上显示一个地图(最初是谷歌地图)(例如，在一个事件/比赛中一些跑步者的位置)，以及每个跑步者的首字母缩写的一些标记。也就是说，这取决于我以JSON格式获得的数据:

data = [
    {
        "lat": 44.363,
        "lng": 3.044,
        "full_name": "Paul Cardiff"
    }
    {
        "lat": 44.473,
        "lng": 3.144,
        "full_name": "Mark Zein"
    }
    ...
]

我想用首字母标记(Mark Zein -> M.Z.)来表示每个跑步者在地图上的当前位置。例如(请原谅我这样表示):

                            -----
                            |M.Z|       _______________________road
      -----                 --|--      /
      |P.C|          _________v________| 
      --|--         /
     ___v__________/

我知道我可以创建一个自定义图标的google.maps.Marker，但我发现很难根据我收到的数据动态地创建这些图标(这可能会随着时间的推移而改变)。

是否有一种方法可以从数据动态创建图像/图标?或者你能想到另一种生成这些图标的方法吗?

我一直在做一些研究，但到目前为止我没有找到什么，所以任何帮助将非常感激!

编辑:

我目前正在嘲笑我获取数据的方式，但想法是从套接字获取数据。所以我现在的代码是:

var json_socket = {
    "lat": 44.363,
    "lng": 3.044,
    "full_name": "Paul Cardiff"
};

以及我如何添加标记:

var live_user = {lat: json_socket["lat"], lng: json_socket["lng"]};
var marker = new google.maps.Marker({
    position: live_user,
    map: map,
    icon: "icon.png"
});

您可以使用简单的loop

遍历标记数组

我使用label来显示首字母

var data = [{
        "lat": 44.363,
        "lng": 3.044,
        "full_name": "Paul Cardiff"
    } {
        "lat": 44.473,
        "lng": 3.144,
        "full_name": "Mark Zein"
    }
    ...
];
for (var i = 0; i < data.length; i++) {
    var item = data[i];
    var latLng = new google.maps.LatLng(item.lat, item.lng);
    var initials = item.full_name.match(/'b('w)/g).join('');
    // Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        label: initials,
        icon: "icon.png"
    });
}
相关文章：