Javascript根据数据动态创建图像/图标（标记）

我想在网站上显示一张地图（最初是谷歌地图）（例如，某个项目/比赛中一些跑步者的位置），以及一些带有每个跑步者姓名首字母的标记。也就是说，根据我以JSON格式获取的数据：

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

我想用一个由其首字母识别的标记（

markzein

-->

M.Z.

）来表示每个跑步者在地图中的当前位置。例如（请原谅我的陈述）：

我知道我可以创建一个带有自定义图标的

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"
});

---

可以使用简单循环遍历标记数组

我用这个字母来显示首字母

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"
    });
}

var数据=[{
“lat”：44.363，
“液化天然气”：3.044，
“全名”：“保罗·卡迪夫”
} {
“lat”：44.473，
“液化天然气”：3.144，
“全名”：“马克·泽恩”
}
...
];
对于（变量i=0；i

能否向我们展示您尝试创建这些标记的内容？从哪里获得这些数据？我现在在代码中添加了我所拥有的（只是一个模拟，因为我希望实际数据来自我将连接到的套接字）。也许我应该在服务器中创建标记？模拟目前还可以。您还应该向我们展示代码添加的标记，这只是

google.maps.Marker

的正常方式。谢谢很好，谢谢你的回答。但是，这会将图标的标题设置为首字母，但我希望在地图中看到首字母，而无需鼠标悬停或单击标记。这就是为什么我想到“动态创建图标”，但我可能采取了错误的方法。好吧，对不起，我从来没有使用过谷歌地图标记。我将

标题

更改为

标签

。从文档来看，标签似乎将直接显示在标记中。你能试试吗？是的，如果我能设置一个合适的背景图标，并设置标签的格式，这可能会奏效。谢谢如果我能做到这一点，我会回信的！如果您需要，我仍然可以尝试帮助您，即使我真的不知道如何使用谷歌标记进行编码，heheI终于成功了，正如我在《非常感谢您》中看到的那样，更改了标签属性！

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"
    });
}