我想獲得一些技巧和訣竅來實現帶有JavaScript的web界面，該界面允許用戶點擊地圖上的某些預定義區域並返回點擊提交按鈕時點擊區域的列表。這個列表將被髮送到服務器（爲此我可以使用HTTP「post」方法）。使用HTML圖像映射實現JavaScript網絡界面的技巧和竅門
第一個問題是：如何在地圖上定義區域。 我紅色的HTML圖像映射，但它似乎是麻煩的，因爲我將不得不提取每個區域的座標。我想知道他們是否會自動從圖像中生成這個列表？
第二個問題是：如何存儲點擊區域的列表，以便在用戶點擊提交按鈕時將其發送到服務器。我不是太熟悉JavaScript，因此可能會是一件容易的一個有經驗的JavaScript程序員;-)
感謝
的形式隱藏字段可以
[區域進行更新的onclick =「document.forms [0] .clicked.value + =」，區域3' 」 ... />
[面積的onclick = 「document.forms [0] .clicked.value + =」，region4' 」 ... />
[形式的onsubmit =「變種VAL = this.clicked.value;如果（VAL）this.clicked.value = val.substring（1） 「>
[INPUT TYPE =」 隱藏」名稱= 「點擊」 值= 「」/>
在腳本刪除前導逗號
請更改[到< - 所以讓我很難與上面的代碼
這取決於你是從讓你的地圖是否有公開的API。 ？一般來說，我會說他們犯規d必須手動添加。爲了幫助你創建一個界面，爲你更容易做到這一點，即你在特定區域拖動一個小框，然後你可以輸入其詳細信息，如縣，區號等。
將區域存儲爲2維多維數組。 map[x][y].town = 'uxbridge'然後將一個事件監聽器委派給一個圖像。找出鼠標點擊的x，y座標，循環查看地圖數組是否匹配。用戶必須點擊1px點才能在數組中找到它，所以爲了避免這種情況，只需使用50px的「間距」值，這樣x，y就可以達到50px。然後突出顯示該區域並將其添加到區域數組。有可能是做這與<map>和更好的算法搜索map[]陣列的一個更好的辦法，但最終你必須每個元素轉換的圖[]數組<area>這將是無論如何繁瑣
實際上廢棄，<map><area>會更容易和適合這個。這裏最大的問題是如何獲取存儲在map[]陣列中的區域，這也是第1點，並且關於可以使用的API，或者通過接口手動添加它們。然後循環訪問陣列，並將其輸出到每個x，y，w，h座標爲area，並在完成後推送到DOM。然後爲每個OR添加一個事件偵聽器，如果您想更高效，請委派一個事件偵聽器<map>來處理點擊事件。然後，您只需從該區域元素的map []數組中提取數據。
感謝您的幫助。沒有公共API或任何其他。我實際上定義了我自己的區域（它們不對應於國家或國家內的任何細分）。 我發現了一些腳本來自動將SVG轉換爲圖像映射（請參閱http://stackoverflow.com/questions/3320952/how-to-automatically-create-imagemaps-of-grey-maps-from-wikipedia），所以我會看看我是否可以將包含區域標籤的png圖像轉換爲SVG圖像。 – user421800 2010-08-19 12:21:47
我嘗試了maphilight腳本（http://davidlynch.org/js/maphilight/），它工作的很好，但是當使用具有很多區域的地圖（我有大約10000個區域）時，它似乎消耗了很多CPU時間。有沒有辦法解決這個問題？
順便說一句，這裏存在這個腳本可用的改進版本： http://formidablo.nl/jquery/
這些地圖創建程序通常需要一個SVG圖像作爲輸入：http://stackoverflow.com/questions/3320952/how-自動製作image-map-from-gray-maps-from-wikipedia – user421800 2010-08-19 12:22:38