ユーザーがマップ上の事前定義された地域をクリックできるようにし、送信ボタンをクリックするとクリックされた地域のリストを返す JavaScript を使用した Web インターフェイスを実装するためのヒントとコツを入手したいと思います。このリストはサーバーに送信されます (そのために、HTTP の "post" メソッドを使用できます)。
最初の質問は、地図上で地域を定義する方法です。私は HTML イメージ マップについて赤字ですが、各領域の座標を抽出する必要があるため、面倒なようです。画像からこのリストを自動的に生成する方法になるかどうか疑問に思っていましたか?
2 番目の質問は、ユーザーが送信ボタンをクリックしたときにサーバーに送信できるように、クリックされた領域のリストを保存する方法です。私は JavaScript にあまり詳しくないので、経験豊富な JavaScript プログラマーにとってはおそらく簡単なものになるでしょう ;-)
ありがとう
マップをどこから取得しているかによって異なります。パブリック API はありますか? 一般に、それらは手動で追加する必要があると思います。これを簡単に行うインターフェイスを作成できるようにするために、特定の地域の周りに小さなボックスをドラッグすると、郡、市外局番などの詳細を入力できます。
領域を 2 多次元配列として格納します。map[x][y].town = 'uxbridge'次に、イベント リスナーをイメージにデリゲートします。マウスがクリックされた x,y 座標を調べ、マップ配列をループして一致するかどうかを確認します。ユーザーは、配列内で 1 ピクセルの点をクリックする必要があるため、これを回避するには、たとえば 50 ピクセルの「間隔」値を使用して、x、y をいずれかの方法で 50 ピクセルにすることができます。次に、その領域を強調表示して、領域配列に追加します。おそらくこれを行うより良い方法と配列<map>を検索するためのより良いアルゴリズムがありmap[]ますが、最終的には map[] 配列内のすべての要素を変換する必要があり、<area>とにかく面倒です
実際にはそれを破棄する<map><area>方がはるかに簡単で、これに適しています。ここでの最大の問題は、領域をmap[]配列に格納する方法を考え出すことです。これもポイント 1 であり、使用できる API に関するすべて、またはインターフェイスを介して手動で追加することです。次に、配列をループして、x、y、w、h 座標をそれぞれに出力し、area完了したら DOM にプッシュします。次に、各 OR にイベント リスナーを追加して、より効率的にしたい場合は、イベント リスナーをデリゲートし<map>てオン クリック イベントを処理します。次に、その area 要素の map[] 配列からデータを取得するだけです。
maphilight スクリプト ( http://davidlynch.org/js/maphilight/ ) を試してみましたが、非常にうまく機能しますが、多くのエリア (約 10000 のエリアがある) を持つマップを使用すると、多くの CPU 時間を消費するようです。それを修正する方法はありますか？
ところで、このスクリプトの改良版がここにあります: http://formidablo.nl/jquery/
フォームの非表示フィールドは次のように更新できます
[ area onclick="document.forms[0].clicked.value+=',region3'" ... />
[ area onclick="document.forms[0].clicked.value+=',region4'" ... />
[form onsubmit="var val = this.clicked.value; if (val) this.clicked.value=val.substring(1)">
[input type="hidden" name="clicked" value="" />
スクリプトは先頭のコンマを削除します
[ を < に変更してください - SO 上記のコードで苦労しています