单击 SVG 地图的打开模式答案

【问题标题】：Opening modal where SVG map is clicked单击 SVG 地图的打开模式
【发布时间】：2021-12-17 07:14:08
【问题描述】：

围绕我要实现的功能寻找最佳实践。

我有一张SVG 地图，其中包含用户可以点击的蓝色小图标，请参阅下图以供参考：

当用户点击任何蓝色图标时，我希望通过它打开一个小模式，以展示该地区的信息。例如，看下面的截图：

因此，在上面的例子中，用户点击了底部的蓝色圆圈，这会为该区域打开一个小模式。

现在，在我的 svg 中，我为每个蓝色图标 (<g class="mapLocations__icon" id="uk" ..."> 添加了 ID，但是通过这种方法，我看到的两个选项是：

似乎都不是一个好方法。

有什么建议吗？

这是我的svg 供参考：https://jsfiddle.net/6squyc7d/（添加为 jsfiddle，因为粘贴代码会使我超出字符限制）

【问题讨论】：

【解决方案1】：

在onclick 事件中，您可以使用 x 和 y 坐标动态地绝对定位模态。所以实际上你可以在 onclick 函数上创建和定位模态。

function openModal( evt ) {
 var intCoordX = evt.clientX;    
 var intCoordY = evt.clientY;
 // Modify modal properties
 // Open modal
}

【讨论】：

【解决方案2】：

对于每个点，您都有一个 ID。您可以使用 forEach 循环（数组中的所有 Id）为每个点添加一个 onclick 侦听器。然后您可以将此代码放入 forEach 循环中：

const dot = document.getElementById('canada')
dot.addEventListener('click', event => {
  console.log(event.x, event.y)
});

在此代码中，您会看到带有 Id（加拿大）的点。然后你有 click 事件，你可以看到用户在他们的屏幕上点击的位置（x 和 y 像素）。

然后你可以放置一个绝对的div，上面和左边的值。

.position {
  position: absolute;
  opacity: 0;
}

然后您可以使用 JS 将顶部和左侧的模态放置在右侧位置并将不透明度设置为 1；它会使 div 显示在正确的位置。

【讨论】：