3 つのリストボックスを使用してマップ上のマーカーをフィルター処理できるようにしたいと考えています。各リストボックスには複数の選択肢がある場合があります。
チェックボックスを使用したこの例のように、Google マップのフィルタリングについてウェブ上で見つけたものはありません。
show()
関数と関数を除いて、そこからすべてのコードを借りて、hide()
自分用にいくつか作成しました。
// grabs values of all selected items inside a listbox
// pushes them into an array and returns it.
// 'listbox' string parameter is mandatory
function grabSelectedItems(listbox) {
if(document.getElementById(listbox)){
var selectedOptions = [];
var listBoxInstitutions = document.getElementById(listbox);
for(var i = 0; i < listBoxInstitutions.options.length; i++) {
if(listBoxInstitutions.options[i].selected) {
selectedOptions.push(listBoxInstitutions.options[i].value);
}
}
return selectedOptions;
}
alert(listbox + " couldn't be found");
}
// uses 'grabSelectedItems()' to get selected values
// from multiple listboxes, puts the returned arrays into
// one, big array and returns it.
// accepts minimum 1 string parameter(mandatory) or more
// treating each parameter as the name of a listboxe
// to grab selected values from
function grabAllSelectedItems() {
if(arguments.length > 0) {
var allSelectedOptions = [];
for(var i = 0; i < arguments.length; i++) {
allSelectedOptions.push(grabSelectedItems(arguments[i]));
}
return allSelectedOptions;
}
alert("Please pass at least one string parameter");
}
そして今のところ、id の入力ボタンfilter
がクリックされたときに、選択した値の大きな配列を返すために使用します。
$(function() {
$("#filter").click(function() {
grabAllSelectedItems('listbox1', 'listbox2', 'listbox3');
});
});
しかし、私は今行き詰まっており、リストボックスでの選択に基づいてマーカーをプロットする方法がわかりません。
すべてのデータを含むこの 1 つの大きな XML ファイルがあり、それを使用して、リストボックスで選択したものに基づいてマップ上にマーカーを生成およびプロットしたいと考えています。すべてのマーカーには緯度と経度の座標がありますが、これらのマーカーには、独自の緯度と経度の座標を持つこれらのサブマーカーも含まれています。彼らの情報は相互に関連しているので、私はこのようにしました。
誰かが前にこのようなことをしましたか?