VEMap.AddControl メソッド

[アーティクル]
03/04/2009

カスタムコントロールをマップに追加します。

構文

VEMap.AddControl(element, zIndex);

パラメータ

パラメータ	説明
element	追加するコントロールを含む HTML 要素です。
zIndex	コントロールの Z オーダーです (任意指定)。

解説

DOM (Document Object Model) の document.CreateElement メソッドを使用すると、新しい HTML 要素を作成できます。その場合は、必要な機能を追加してから AddControl メソッドを呼び出します。また、DOM を使用すると、既に追加されているコントロールを削除することもできます。

Internet Explorer が埋め込みコントロールを Web ページに表示する方法が原因で、3D モードのマップを操作していると、カスタムコントロールがマップの背後に隠れてしまいます。3D マップでカスタムコントロールを前面に表示したい場合は、次の手順に従って操作してください。

カスタムコントロールと同じサイズ、同じ位置の IFRAME 要素を作成します。
IFRAME の frameborder プロパティを 0 に設定し、scrolling プロパティを "no" に設定します。
IFRAME の style プロパティで、z-index を 1 に設定し、カスタムコントロールの位置設定に合わせて位置を設定します。
カスタムコントロールの style プロパティで、z-index に 1 より大きい数を設定します。
次のコード行を呼び出します。ここで、shim は IFRAME 要素、el はカスタムコントロールです。
```
el.shimElement = shim;
el.parentNode.insertBefore(shim, el);
```

例

<!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 i = 0;
            
function GetMap()
         {
map = new VEMap('myMap');
map.LoadMap();       
         }
         
function AddControl()
         {
var el = document.createElement("div"); 
el.id = "myControl" + i; 
el.style.top = 100 + (i * 10); 
el.style.left = 100 + (i * 10);            
el.style.border = "2px solid black";
el.style.background = "White";
el.innerHTML = el.id;  
map.AddControl(el);
addShim(el);
counter.value = i;
i++;
         }
         
function addShim(el)
         {
var shim = document.createElement("iframe");
shim.id = "myShim" + i;
shim.frameBorder = "0";
shim.style.position = "absolute";
shim.style.zIndex = "1";
shim.style.top  = el.offsetTop;
shim.style.left = el.offsetLeft;
shim.width  = el.offsetWidth;
shim.height = el.offsetHeight;
el.shimElement = shim;
el.parentNode.insertBefore(shim, el);
         }
         
function DeleteControl()
         {
var myControl = document.getElementById("myControl" + counter.value);

if (myControl!=null)
            {
var myControlID = myControl.id;
map.DeleteControl(myControl);
alert("コントロール " + myControlID + " は削除されました。");
            }
else
            {
alert("ID " + counter.value + " のコントロールは見つかりませんでした。");
return;
            }
            
var myShim = document.getElementById("myShim" + counter.value);

if (myShim!=null)
            {
myShim.parentNode.removeChild(myShim);
            }

myShim = null;
i--;
counter.value = i;
         }
         
function HideControl()
         {
var myControl = document.getElementById("myControl" + counter.value);

if (myControl!=null)
            {
map.HideControl(myControl);
alert(myControl.id + " が非表示になりました。");
            }
else
            {
alert("ID " + counter.value + " のコントロールは見つかりませんでした。");
return;
            }
         }
         
function ShowControl()
         {
var myControl = document.getElementById("myControl" + counter.value);
   
if (myControl!=null)
            {
map.ShowControl(myControl);
alert(myControl.id + " が復元されました。");
            }
else
            {
alert("ID " + counter.value + " のコントロールは見つかりませんでした。");
return;
            }
         }
</script>
</head>
<body onload="GetMap();" style="font-family:Arial;font-size:x-small">
<div id='myMap' style="position:relative; width:400px; height:400px;">
</div>
コントロール:
<input type="text" id="counter" size="20" value="0"/>
<br />
<input type="button" value="コントロールを追加する" onclick="AddControl();"/>
<input type="button" value="コントロールを削除する" onclick="DeleteControl();"/>
<br />
<input type="button" value="コントロールを非表示にする" onclick="HideControl();"/>
<input type="button" value="コントロールを表示する" onclick="ShowControl();"/>
</body>
</html>

VEMap.AddControl メソッド

構文

パラメータ

解説

例

関連項目

参照

その他のリソース