はじめに
Virtual Earth Map Controlは，
コレクションの表示
Live Search Mapsにはプッシュピンのグループや経路情報を作成して管理できるコレクションという機能があります
図1 コレクション機能
まずは単純にマップを表示するだけのページを作成します。本連載の第4回目も参考にしてください
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1&mkt=ja-jp"></script>
<script type="text/javascript">
var map = null;
function pageLoaded() {
map = new VEMap("myMap");
map.LoadMap();
}
</script>
</head>
<body onload="pageLoaded();">
<div id='myMap' style="position:absolute; width:400px; height:400px;"></div>
</body>
</html>
コレクションのインポートはVEMapクラスのImportShapeLayerDataメソッドを使用します。
VEMap.ImportShapeLayerData(shapeSource, callback, setBestView);
戻り値はありません。ImportShapeLayerDataの引数には次のものを渡します。
| パラメータ | 説明 |
|---|---|
| shapeSource | VEShapeSourceSpecificationオブジェクト。 |
| callback | データのインポート後に呼ばれるコールバック関数。VEShapeLayerオブジェクトが渡されます。 |
| setBestView | trueまたはfalseのブール値。trueの場合， |
VEShapeSourceSpecificationというクラスが出てきました。このクラスはインポートするデータの形式・
| パラメータ | 説明 |
|---|---|
| dataType | VEDataType列挙体。GeoRSS， |
| dataSource | GeoRSS， |
| layer | VEShapeとしてデータをインポートする先のVEShapeLayerオブジェクト。 |
以上をまとめるとコレクションを表示するコードは次のようになります。先ほどのコードのpageLoaded関数の変更と新たにonFeedLoaded関数を追加しています。
function pageLoaded() {
map = new VEMap("myMap");
map.LoadMap();
var layer = new VEShapeLayer();
var spec = new VEShapeSourceSpecification(VEDataType.VECollection, 'AFE8504AA8CD166F!368', layer);
map.ImportShapeLayerData(spec, onFeedLoaded, true);
}
function onFeedLoaded(layer) {
alert(layer.GetShapeCount() + ' 個のアイテムをインポートしました。');
}
pageLoaded関数の中では，
コレクションの場合，
図2 お気に入りの追加
変更したコードをWebブラウザで表示すると図1のようになったと思います。プッシュピン上に数字は描かれませんが，
- ※1
4月11日にVirtual Earth Map Control 6.
1がリリースされました。6. 0と互換性があるため， 特に理由がない限り6. 1を使用するとよいでしょう。scriptタグに指定するURLのパラメータを6から6. 1に変更します。 本記事での図は6.
0のものになっています。