添加复杂的图标到谷歌地图

发布于 2024-09-26 22:24:59 字数 538 浏览 0 评论 0原文

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

例如,我有一些标记:

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

我需要类似的东西:

drawImageNextToTheMarker(“myImg”);

做到这一点的简单方法是什么?

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

谢谢。

编辑:

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

I need to represent the state of some devices from the db on the google map. Each device has it's location and complex status. Something like on line / off line / camera OK etc. For each status I need to draw a bubble next to the icon on the map (e.g. one green if device is on line and one red if camera is off line).

For example I have some marker:

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

And I need something like:

drawImageNextToTheMarker("myImg");

What is the easies way to do this?

Or is there any way to draw the html table with pictures centered at some position on the map?

Thank you.

Edit:

One solution I thought of is to make a image for each status with transparent background and to draw every image for for every status. It is not a nice solution and I will spend some time making those images but that is the best solution for now.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

方觉久 2024-10-03 22:24:59

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

图标

  • 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 那样在每个页面加载时创建相同的图标

It would probably be easiest to create icons for each state and add the correct icon to the map (As long as you don't have a ton of variations).

icons

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

when adding the marker for the position add the correct icon.


EDIT

In light of new info here's another idea...


Have a dedicated place for icons. Maybe /images/device_icons/

Use a server side language to create a image file name in a consistent format

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

Then check for existence of the icon.

If it exists use the previously created version, if it doesn't exist use whatever language you're using to create the icon and save it. This way it will be easy to add devices and statuses, and you wont be creating the same icons on every page load like you will if youre using javascript
.

圈圈圆圆圈圈 2024-10-03 22:24:59

我会回答我自己的问题:
以下是在标记旁边编写标签的方法:

http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html

I will answer my own question:
Here is the way to write labels next to the marker:

http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文