如何判断一个点是否属于jvectormap中的一个区域？

Question

有什么方法可以确定给定点（[x,y] 或 [latitude, longitude]）是 jvectormap 区域的成员吗？

我已经知道如何将它们从一种格式转换为另一种格式，但我不知道这将如何实现。

Answer 1

假设您在名为 "world-map" 的 div 中创建了一个类似于 jVectorMap 示例中的地图。

在你的 div 里面，jVectorMap 会放另一个 div 有 class "jvectormap-container"，在这个容器里面你会找到 svg 并且在 svg 里面有所有区域路径。

我的示例是简单的 javascript，但您可以使用您喜欢的任何方法找到此路径，例如使用 jQuery 选择器等。

你应该搜索以div开头的路径，你专门为你想在里面搜索的地图创建的，因为你可以在一个页面中有多个jVectorMap。

在我的示例中，我使用 onmousemove 事件来显示 区域代码 和底层的 x,y 坐标。

var paths = document.getElementById("world-map").firstElementChild.firstElementChild.getElementsByTagName("g")[0];

paths.onmousemove=function(e){
    var path = document.elementFromPoint(e.clientX,e.clientY);
    console.log('Region: ' + path.getAttribute("data-code") + ' at point: ' + e.clientX + ','+ e.clientY);
};

请注意，如果您要搜索的点相对于 0,0，例如最左边，地图的最上角，然后您应该添加此元素偏移量，只需查看我的示例的控制台日志 - 或者更好，提供代码示例 ;-)

如何判断一个点是否属于jvectormap中的一个区域？

How to determine if a point belongs to a region in jvectormap?

jvectormap