我有一张来自 jvectormap http://jvectormap.com/maps/countries/united-kingdom/的地图,它以 SVG 的“路径”显示国家地区。
我还有一组具有纬度和经度坐标的对象。
给定坐标和 SVG 路径,是否可以将每个对象分配给特定区域?
我有一张来自 jvectormap http://jvectormap.com/maps/countries/united-kingdom/的地图,它以 SVG 的“路径”显示国家地区。
我还有一组具有纬度和经度坐标的对象。
给定坐标和 SVG 路径,是否可以将每个对象分配给特定区域?
我找到了一种方法,但它真的很老套,而且我确信有更好的方法来做到这一点。
无论如何,这是我对问题的解决方案:
jvm.Map.prototype.latLngToRegion = function (lat, lng) {
var pointOnMap = this.latLngToPoint(lat, lng),
pointOnPage = {
x: Math.round((pointOnMap.x + this.container.offset().left) - $(window).scrollLeft()),
y: Math.round((pointOnMap.y + this.container.offset().top) - $(window).scrollTop())
},
element = document.elementFromPoint(pointOnPage.x, pointOnPage.y),
region = $(element).attr('data-code');
return region; // note, this will only give you the region code, but from that you can read out most of what you need from jvectormaps itself.
}
需要注意的是,您要查找的纬度和经度必须在视图中,以便 document.elementFromPoint 起作用。但是您也许可以更新滚动和地图平移等列表。
好吧,也许您可以看看 jvectormap 如何将您当前的鼠标位置与该区域匹配 - 您应该能够以类似的方式匹配您的 lat/lng 坐标