VEMap.ShowInfoBox メソッド
シェイプの情報ボックスを表示します。
構文
VEMap.ShowInfoBox(shape, anchor, offset);
パラメータ
| パラメータ | 説明 |
|---|---|
shape |
情報ボックスを表示するシェイプへの参照です (必須)。 |
anchor |
表示の際に情報ボックスを「ドッキング」させるアンカー ポイントです。VELatLong クラス オブジェクトまたは VEPixel クラス オブジェクトを指定できます。この値は、現在のマップ上で有効なポイントでなければなりません (任意指定)。 |
offset |
アンカー ポイントが VELatLong オブジェクトの場合に、その位置 (緯度経度) を始点とするアンカー ポイントのオフセットを、このパラメータ (VEPixel オブジェクト) で指定します (任意指定)。 |
解説
アンカー ポイントから見てどの方向に情報ボックスを配置するかは、Virtual Earth によって自動的に決定されます。ピンに重ならず、マップの境界内に収まるように配置されます。
情報ボックスの外観をカスタマイズするには、VEShape.SetTitle メソッドと VEShape.SetDescription メソッドを使用して、カスタム HTML を指定します。また、情報ボックスのスタイルを設定するには、VEMap.ClearInfoBoxStyles メソッドと VEMap.SetDefaultInfoBoxStyles メソッドを使用します。
このメソッドでシェイプに関する情報ボックスを表示する場合、shape の VEShape.GetTitleメソッド、VEShape.GetDescription メソッド、VEShape.GetMoreInfoURL メソッド、VEShape.GetPhotoURL メソッドのうち少なくとも 1 つが、長さがゼロではない値を返す必要があります。この条件を満たさない場合、情報ボックスは表示されません。
例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<script type="text/javascript">
var map = null;
var shape;
var latLong = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
latLong = map.GetCenter();
//マップにプッシュピンを追加します。
shape = new VEShape(VEShapeType.Pushpin, latLong);
shape.SetTitle('<H1>タイトル</H1>');
shape.SetDescription('<div style="width:200px; background-color:white; color:blue">'+
'これはプッシュピンです。この位置は <b>' +
latLong + '</b> です。なお、カスタム HTML を使用することもできます。</div>');
map.ClearInfoBoxStyles();
map.AddShape(shape);
}
function ShowInfoBox()
{
map.ShowInfoBox(shape);
}
function HideInfoBox()
{
map.HideInfoBox();
}
function ShowInfoBoxAt()
{
var x = parseInt(document.getElementById('txtMapX').value);
var y = parseInt(document.getElementById('txtMapY').value);
map.HideInfoBox();
if (!isNaN(x) && !isNaN(y))
{
map.ShowInfoBox(shape, new VEPixel(x,y));
}
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<div>以下のボタンをクリックすると、情報ボックスを表示したり非表示にしたりできます。</div>
<div>
<input value='情報ボックスを表示する' type='button' onclick='ShowInfoBox();'/>
<input value='情報ボックスを非表示にする' type='button' onclick='HideInfoBox();'/>
</div>
<div>
x:<input id='txtMapX' style='width:30px' type='text' value='0'' />
y:<input id='txtMapY' style='width:30px' type='text' value='0'' />
<input value='情報ボックスを (x, y) の位置に表示する' type='button' onclick='ShowInfoBoxAt();'/>
</div>
</body>
</html>