我有一个城市列表，其中包含有关城市的其他信息。 我想根据这些城市的位置将这些城市固定在地图（图像）上，如果您悬停图钉，我想显示附加信息。
对于城市地图，我可能会使用<map>，但似乎不打算在<area> 中包含代码。
对于城市列表，我会使用列表。但是列表似乎总是要缩进的。而且似乎很难设置它们的样式，以便列表点出现在地图上。
那么你实际上是用什么来做这个的呢？
编辑：这只是一个例子，我不想使用谷歌地图或任何东西。我想使用 HTML 和 CSS！它也可能是家谱上的人或天空中的星星或任何东西。
问题是我有一个语义列表，所以我会使用一个 html 列表，但我不希望它缩进。
由于我的“可访问性”标签被删除而没有在此处添加信息（感谢朋友...）：我希望尽可能多的人可以访问该页面。因此，在屏幕阅读器等上不起作用的解决方案不起作用！
【问题讨论】：
CSS 定义了一个样式属性z-index。 z-index 最低的元素位于底部，较高的索引与较低的索引重叠。 （谷歌“CSS 层”了解更多信息。）
因此，您可以将地图图像 <img> 放在最低索引处，并定位例如每个城市的文本段落<p> 甚至<a href> 连续更高的索引（因为城市标签也可能相互重叠）。
然后您可以使用onmouseover 操作来显示每个城市的信息（Javascript 等）。但更简单的方法可能是使用大多数 HTML 标记的 title 属性，大多数浏览器（据我所知）在鼠标悬停时在“工具提示”处实现该属性。它更基本，但对于您的应用程序可能已经足够了。
【讨论】：
media types 指定不同的样式，包括aural 和`braille
仅供参考：
Article on W3Schools 解释 Google Maps API。
google 上有大量关于此的信息。
“列表似乎总是缩进”是什么意思？ 只需一点 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 更容易:)
【讨论】：