javascript – 将复杂图标添加到谷歌地图

2023年3月1日 236次阅读

我需要在谷歌地图上表示数据库中某些设备的状态.每个设备都有它的位置和复杂的状态.像在线/离线/相机OK等等.对于每个状态,我需要在地图上的图标旁边绘制一个气泡(例如,如果设备在线则为绿色,如果相机在线,则为一个红色).

例如,我有一些标记：

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

我需要这样的东西：

drawImageNextToTheMarker( “myImg”);

这样做的简易方法是什么？

或者有没有办法绘制html表格,图片集中在地图上的某个位置？

谢谢.

编辑：

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

最佳答案 为每个州创建图标并向地图添加正确的图标可能是最简单的(只要您没有大量的变化).

图标

> 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,你就不会在每个页面加载上创建相同的图标
.

点赞