用HTML内容替换标记 [英] Replace Markers by html content

查看:100
本文介绍了用HTML内容替换标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在搜索Google Map API V3文档,但找不到任何方法来使用自己的html内容而不是图像来在地图上创建自定义图标. 我想显示一个动态标记,可以显示文本或任何我想要的东西.

I have been searching on the Google Map API V3 documentation but I could not find any way to use my own html content instead of an image to create a custom icon on the map. I would like to display a dynamic marker that can display text or anything I want.

例如:

    <div class="marker">Dynamic text</div>

我已经看到此线程 http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

I have seen this thread google map api v3: can I use a div instead of an image to create the custom icon? where someone advice to use "Custom Overlays" but in the documentation it only displays an image... I don't see the point of explaning how to display an image with "Custom Overlays" if it is done to display html content. http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

那我该如何进行呢?我应该使用自定义叠加层吗?似乎没有什么更容易做到的吗?

How should I proceed then ? Should I use Custom Overlays ? There is not anything that seem easier to do that ?

推荐答案

如果您想在地图上放置不受地理限制的东西(例如菜单或标题栏),Mano的答案是正确的.

Mano's got the right answer if you're looking to position something on the map that isn't bounded geographically, like a menu or titlebar.

如果您要显示的是地理上有界限的内容,例如城市名称(假冒该API尚未执行此操作,请稍等一秒钟),然后您将转到CustomOverlay路线.尽管所有示例都使用图像,但绝不是必须的.如果您查看简单重叠示例和查看第62行附近的源代码,您将看到将<img>对象添加到<div>的确切行.您可以轻松地向div中添加文本,而不是图像.

If you're looking to display something geographically-bound, like a city name (pretending for a second that the API doesn't already do this) than you'll be headed the CustomOverlay route. While all the examples use images, that's not a requirement by any means. If you look at the simple overlay example and view the source code around line 62 you'll see the exact lines adding the <img> object to the <div>. You could just as easily add text to the div instead of an image.

这篇关于用HTML内容替换标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆