熱血！MULTI web

diary/20080829

ID: 884 | 作成日: 2008/08/29 [Fri] 15:53:00 | 最終更新: 2012/09/12 [Wed] 16:51:50

FrontPage / diary / 20080829

「Yahoo!地図API」Flash版のアイコンを一括設定

「Yahoo!地図API Flash版」を使っているのですが、先日、地図アイコンを配置する関数を複数のアイコンを一括して配置できる「addIcons()」を導入。

これまでのものは、ネットで見つけたサンプルを参考にJavaScriptの繰り返し系の命令で「addIcon()」で一個ずつ配置していました。
Yahoo!のリファレンスを見て一括設定があることは知っていたけど、その解説が説明なさ過ぎで正直やり方わからなかったというのがそうしていた一番の理由。

でもやはり一括配置の関数のほうがいいだろうとアイコン変更の流れで手を付けたわけですが、今回はそのやり方を書いておきます。

なお、「addIcon()」関数に関連する部分の抜粋のみで、Yahoo!地図APIそのものの導入の仕方はここでは書かれていませんのでご注意ください。

「Flash版地図API Version 2リファレンスマニュアル」の「addIcons(pois)」の項目には

複数のアイコンを追加します。追加したアイコンは、すべての縮尺で表示されます。
パラメータ：

•pois - アイコンリスト

としか書かれていません。

「pois」の部分にアイコン配置に関するパラメータを当て込むわけですが、やり方としてはJavaScript版の同種の関数と同じでJSONオブジェクト形式で「pois」にデータを入れます。
で、JavaScript版とFlash版ではアイコンをひとつずつ追加する「addIcon()」関数は名前は同じですがパラメータが若干違います。
一括追加の「addIcons()」でもそれは同じで、Flash版はFlash版「addIcon()」関数のパラメータを参考にJSONオブジェクトの形にアイコンデータを書き出していきます。

以下はアイコンのJSONオブジェクトの配列の見本です。

var icons = [
	{popup: '吹き出し1', lat: '緯度1', lon: '経度1', id: 'アイコン ID1', cat: 'L1' },
	{popup: '吹き出し2', lat: '緯度2', lon: '経度2', id: 'アイコン ID2', cat: 'L2' },
	{popup: '吹き出し3', lat: '緯度3', lon: '経度3', id: 'アイコン ID3', cat: 'L3' }
];

実際に試すときは、それぞれの環境にあわせて任意に書き換えてください。
あとは、「addIcons()」の「()」内にアイコンデータを入れた変数(上記サンプルの場合「icons」)を「addIcons(icons);」というように記述します。

一応、パラメータの説明をすると