javascript - 向谷歌地图添加复杂图标

Question

我需要从谷歌地图上的数据库中表示某些设备的状态。每个设备都有它的位置和复杂的状态。诸如在线/离线/相机正常等之类的东西。对于每种状态，我需要在 map 上的图标旁边绘制一个气泡(例如，如果设备在线则为绿色，如果相机离线则为红色)。

例如我有一些标记:

new google.maps.Marker({
                position: currLatLng,
                map: map,
                icon: image
            });

我需要这样的东西:

drawImageNextToTheMarker("myImg");

执行此操作的简单方法是什么？

或者有什么方法可以绘制以 map 上某个位置为中心的带有图片的html表格？

谢谢。

编辑:

我想到的一个解决方案是为每个状态制作一个透明背景的图像，并为每个状态绘制每个图像。这不是一个很好的解决方案，我会花一些时间制作这些图像，但这是目前最好的解决方案。

Answer 1

为每个州创建图标并将正确的图标添加到 map 可能是最简单的方法(只要您没有大量的变体)。

图标

• icon_online_camera-on.gif
• icon_online_camera-off.gif
• icon_offline_camera-on.gif
• icon_offline_camera-off.gif

为位置添加标记时添加正确的图标。

---

编辑

根据新信息，这里有另一个想法......

---

有专门的图标位置。也许 /images/device_icons/

使用服务器端语言创建格式一致的图像文件名

DEVICE-ID_ONLINE_CAMERA_OTHER-THING_LAST-THING.gif
3_1_0_1_3.gif // device - 3, online, camera off, other thing - 1, last thing -3

然后检查图标是否存在。

如果它存在，请使用之前创建的版本，如果它不存在，请使用您正在使用的任何语言来创建图标并保存它。这样就可以轻松添加设备和状态，并且您不会像使用 javascript 时那样在每次加载页面时创建相同的图标.