as3とgooglemapsAPIでのcheckbox操作(Flex環境)

先輩が研究調査で中国に行くため、それまでにできなかった仕事を頼まれた。
10月の学会中の3日間の間、飯全おごりという報酬と引き換えに!笑。

その仕事というのが、
・先輩が作っている”さやまっぷ”システムのバグの修正
・査読後返却された論文をスキャンして転送

というもの。

日ごろお世話になっている先輩なので、さすがの忙しい俺も快く引き受けたのである。
バグの修正の中で学ぶ点があったのでメモっておこう。

下の画像のように操作メニューに狭山の見所のチェックボックスが並んでいて、チェックした項目が地図上に表示されるというもの。

このチェックボックスの動作が上手くいっておらず、チェックして表示チェックをはずして非表示という動作を横断的に繰り返すとメチャクチャな表示になってしまっていた(爆 のでそれを直した。

//チェックボックスの数だけ繰り返す
for(var t:int=0;t<themeCBoxArr.length;t++){
 // クリックした際のイベントハンドラ
 themeCBoxArr[t].addEventListener(MouseEvent.CLICK, function(e:MouseEvent){
 //クリックしたチェックボックスの情報を取得
 var eString:String = e.target.toString();
 //eStringの最後の数字を取得(チェックボックス固有の番号)
 var eNumber:Number = Number(eString.slice(eString.length - 1, eString.length));
 var points:XMLList = messagesXML..point;
 //eStringを記憶する配列に格納する
 midokoroNumArr.push(eNumber);
 // チェックした見どころ番号配列の中身から重複を削除する
  for(var u:Number=0;u<midokoroNumArr.length - 1;u++){
   // チェックした見どころに重複があれば
   if(eNumber == midokoroNumArr[u]){       
    //現在のクリックを削除
    midokoroNumArr.pop();
    //過去のクリックを削除
    midokoroNumArr.splice(u,1);
    //一度全部消す
    map.clearOverlays();
    
   } else {
    // 何もしない
   }
  }
}

修正したfor文だけ表示してみた。
分かりづらいと思うが、チェックボックスをクリックするたびにこのfor文が呼び出され、以下の流れで処理を行う。(5は上のコードの後ろで記述した部分)

1.クリックしたチェックボックスの固有番号(インデックス)を取得して記憶配列に格納
2.記憶配列を走査して今クリックしたチェックボックスの番号の重複があるか調べる。
3.重複があれば記憶配列から削除
4.マーカーを全て削除
------------------------------------------------
5.記憶配列の内容したがいマーカーを表示


今回のミソは記憶配列の動作部分だった。
まず、チェックボックスをクリックするたびに記憶配列を走査して重複を確認するが、その際、記憶配列の最後の部分を省く必要がある。(そうしないとたった今格納された現在のクリック情報が照らし合わされ、必ず重複してしまう)そのために

for(var u:Number=0;u<midokoroNumArr.length - 1;u++){

のように length - 1 とすることで前回までの記憶を参照できるようにした。こうすると、初回クリック時にこのfor文が読まれないので都合も良い。

if(eNumber == midokoroNumArr[u]){

この部分で重複があるかを確認している。eNumberは現在クリックしたチェックボックスの番号でmidokoroNumArr[u]は走査中の記憶配列の要素。で、重複が発見されたら以下の処理を行う。

midokoroNumArr.pop();
midokoroNumArr.splice(u,1);


ここでpopとspliceで記憶配列から重複した要素を削除している。popによりたった今クリックした記憶を削除し、spliceにより過去にクリックした記憶を削除している。
これによりチェックボックスのチェックが外されると同時に記憶配列からも情報が削除されるという動作が実現する。

あとは変更された記憶配列に基づいてマーカーを再生成すればいいだけ☆