SVG の「パス」で国の地域を表示するjvectormap http://jvectormap.com/maps/countries/united-kingdom/の地図があります。
また、緯度と経度の座標を持つオブジェクトのセットもあります。
座標と SVG パスが与えられた場合、各オブジェクトを特定の領域に割り当てることは可能ですか?
SVG の「パス」で国の地域を表示するjvectormap http://jvectormap.com/maps/countries/united-kingdom/の地図があります。
また、緯度と経度の座標を持つオブジェクトのセットもあります。
座標と 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 が現在のマウス位置と地域をどのように一致させるかを調べることができるかもしれません - 同様の方法で緯度/経度座標を一致させることができるはずです