Javascript 如何使用传单js在地图上精确放置div元素？

我试过这两种方法，但都没能成功。我想把时钟放在多个时区的地图顶部。我使用javascript创建时钟，并将时钟放置在

div

元素中

以下是我尝试过的：

创建一个坐标为

0,0

的点

从这一点开始，使用

containerPointToLatLng

获取地图顶部的纬度值

使用上述lat和long为时区创建

LatLng

将该

LatLng

转换为点，然后使用

x，y

从该点定位div元素

我在第一次呈现页面时执行逻辑，然后在主体调整大小时执行逻辑。但是，如果更改浏览器窗口的大小，时钟将无法正确定位

---

有什么建议吗？

通常会使用L.Control创建自定义控件，然后可以将其添加到控件层。如果这样做，调整地图大小时，传单将负责定位。查看L.Control的参考：

参考资料中有一个自定义控件的示例：如果您想看到更多示例，可以查看许多自定义控件插件中的一个，了解它们是如何实现L.control的。（在控件和交互下）

---

L.控件的唯一缺点是无法将控件垂直或水平居中放置。您只能使用topleft、topright、bottomleft和bottomright。

回答OP的精确问题，即在调整浏览器窗口大小时如何重新定位时钟（因此地图容器尺寸可能已更改），您可能只需重新计算地图事件上的时钟位置

但是，不清楚OP是将时钟作为映射容器的子对象放置，还是将时钟放置在页面DOM树的其他位置

将其作为贴图的子对象放置可能要容易得多，以便其位置始终相对于贴图容器

OP最初问什么？ 如果我正确理解了最初的预期结果，OP希望在特定地理位置（根据评论，在这种情况下为多伦多市[UTC-5]）的顶部覆盖一个时钟（或任何信息）

但是，信息容器不应位于底图固定位置，即不位于精确的地理坐标点（如标记或弹出窗口），而是位于地图容器的顶部，类似于控件（因此iH8的原始答案）

除了它不应该完全固定在地图容器内，而是随着城市水平移动（或任何指定的地理坐标）。因此OP对iH8的回答发表了评论

因此，它听起来类似于，除了使用交互式（可导航）地图和“UTC-5”标题替换为时钟（或任何信息，因此HTML容器应该这样做）并水平跟踪多伦多之外

换句话说，时钟应该位于特定的垂直线上，即经度/子午线

不幸的是，即使在问题发布两年半后，仍然没有提供此类功能的传单插件（至少在内部）

将用例扩展到高度放大的地图… 话虽如此，考虑到用户可能能够高度放大城市（OP没有指定最大放大级别），让时钟水平跟踪精确的经度可能不是一个很好的用户体验：例如，它可以跟踪多伦多中心/市政厅/任何特定的地方，当用户在另一个城区放大时，时钟不再可见，而他/她仍在观看多伦多市的一部分

为了扩展该用例，时钟很可能在其应用的任何区域都可见，即地图视图端口与相关的时区相交时

将用例扩展到高度缩小的地图… OP未详细说明的另一点是，当地图视图端口中显示不同时区的位置时，该怎么办？在中，每个可见时区都有一个标题，这似乎是我们能获得的最完整的信息

但由于传单允许缩小到0级，其中整个世界（即基本上24个时区/不包括夏令时的潜在影响-DST）以256像素的宽度表示，如果每个时钟必须与其相关时区垂直对齐，则几乎没有空间容纳所有这些时钟

现在让我们假设我们不在乎时钟是否重叠

甚至更多的定制案例… 但OP可能希望只在特定的地方显示时钟，而不是整个世界。OP甚至没有说时钟会有所不同（我们可以在同一时区的城市里有时钟，即使这些钟在他们的城市旁边坐着也更有趣——甚至与它们的纬度相称，这样就更容易发现时钟与哪个城市有关，就像在同一个经络的2个城市的情况一样；但是在这种情况下，有一个带有< L.divIcon > <代码>的标记。就够了）

因此，一个定制的案例将不考虑官方时区，而<>强>开发者指定区域>/P> 因此，我们忘记了纬度，尝试在该区域上方垂直对齐时钟，只要它与地图视图端口相交

描述通用解决方案 因此，一个通用的解决方案似乎是让应用程序开发人员能够指定一个HTML元素数组，每个元素都与一系列经度（也可以是一个面积/多边形）关联

时区用例将是一种特殊的情况，其中指定的区域仅仅是来自时区的区域

然后，当且仅当每个元素的关联区域与