私は jVectorMap をうまく使ってきました。インタラクティブなマップを表示するための素晴らしいパッケージです!
この場合、一部のリージョンのみを選択可能にしたいのですが、リージョンをアクティブ/非アクティブに設定するオプションはないようです。その代わりに、「regionsSelectable=false」を設定してから、「selectedRegions」をアクティブにしたいものに設定します。
これは正常に機能します (「アクティブな」領域に対してのみ正しいホバー属性などを表示します) - iOS では 1 つの例外があります。そこでは、「onRegionClick」ハンドラーが呼び出されるのに 2 回の「クリック」(タッチ) が必要です。最初のクリックで、「selectedHover」属性は正しく設定されますが、「handleRegion」は呼び出されません。もう一度クリックすると、「handleRegion」が呼び出されます。
初期化コードは次のようになります。
map = new jvm.WorldMap({
container: $('#mapdiv'),
map: 'world_mill_en',
regionsSelectable: false,
regionStyle: {
initial: { fill: '#0086d0' },
hover: { "fill-opacity": 1.0 },
selected: { fill: '#003a6a' },
selectedHover: { fill: '#ff7a00' }
},
onRegionClick: handleRegion,
selectedRegions:["CN","RU","US"],
...
});
function handleRegion(e,cc) {
alert("cc="+cc);
...
}
必要なのは、いくつかの領域のみを「アクティブ化」する方法、またはこの 2 回のクリックの問題を回避する方法です。