我有一个城市列表，其中包含有关某个城市的其他信息。我想把这些城市根据它们的位置钉在地图(图像)上，如果你把一个大头针悬停，我想显示额外的信息。
对于城市地图，我可能会使用<map>，但似乎不打算在<area>中使用代码。对于城市列表，我会使用列表。但是列表似乎总是要缩进的。而且似乎很难给它们设置样式，使列表点出现在地图上。
那么你到底用了什么呢?
编辑:这只是一个例子，我不想使用谷歌地图或任何东西。我想使用HTML &CSS !也可以是家谱上的人，天上的星星或任何东西。
问题是我在语义上有一个列表，所以我将使用html列表，但我不希望它被缩进
由于我的"可访问性"标签被删除而没有在这里添加信息(谢谢朋友…):我希望这个页面可以被尽可能多的人访问。所以在屏幕阅读器上不起作用的解决方案是行不通的!
CSS定义了一个样式属性z-index。z索引最低的元素放在底部，较高的索引与较低的索引重叠。(谷歌搜索"CSS图层"获取更多信息。)
因此，您可以将地图图像<img>放在最低索引处，并将每个城市的文本段落<p>甚至<a href>放置在连续较高的索引处(因为城市标签也可能相互重叠)。
您可以使用onmouseover动作来显示每个城市的信息(Javascript等)。但更简单的方法是使用大多数HTML标签的title属性，大多数浏览器(据我所知)在鼠标悬停时的"工具提示"中实现该属性。它更基本，但对于您的应用程序来说可能已经足够了。
供参考:
javascript API。
一篇关于W3Schools解释Google Maps API的文章。
谷歌上有很多关于这个的信息。
你说"列表似乎总是缩进"是什么意思?用一点CSS，你可以用HTML列表做任何事情。
ul {list-style-type:none;}
ul li {margin:0; padding:0;}
而<map>元素的定义和用法是:
The <map> tag is used to define a client-side image-map.
An image-map is an image with clickable areas. The required name attribute of
the <map> element is associated with the <img>'s usemap attribute and creates a
relationship between the image and the map.
The <map> element contains a number of <area> elements, that defines the clickable
areas in the image map.
您可以使用php或任何其他服务器端语言制作<area>标签。但不确定这种方法是否比使用Google Maps API更容易:)