Question

我想在网站中显示地图（最初是谷歌地图）（例如，某个参赛者在赛事/比赛中的位置），以及每个跑步者姓名首字母的标记。也就是说，取决于我以JSON格式获得的数据：

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

我想在地图中用每个跑步者的当前位置来表示由其首字母标识的标记（Mark Zein - ＆gt; 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"
});

Answer 1

您可以使用简单循环

迭代标记数组

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

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

1 个答案: