VEShape.GetCustomIcon メソッド
VEShape オブジェクトのカスタム アイコンを取得します。
構文
VEShape.GetCustomIcon();
戻り値
VEShape オブジェクトのカスタム アイコンを表す String または VECustomIconSpecification オブジェクトです。
このトピックの例では、以下のカスタム アイコン画像を使用します。
.jpg "Bb412517.49e551af-ba75-4ee1-a1f6-28fe4d25780c(ja-jp,MSDN.10).jpg")
.jpg "Bb412517.1eb51174-3e3e-475c-a01f-48063d84b762(ja-jp,MSDN.10).jpg")
例
<!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 lat1 = 44.890661025750134;
var lon1 = -85.39930343627931;
var latLong01 = new VELatLong(lat1, lon1); //Elk Rapids
var latLong02 = new VELatLong(44.75453548416006, -85.62744140625001); //Traverse City
var latLong03 = new VELatLong(44.98131376911565, -85.21270751953125); //Bellaire
var poly01 = null;
var pin02 = null;
var pin03 = null;
var shape = null;
var points01 = [
new VELatLong(lat1, lon1 - 0.15),
new VELatLong(lat1 + 0.1, lon1 - 0.05),
new VELatLong(lat1 + 0.1, lon1 + 0.05),
new VELatLong(lat1, lon1 + 0.15),
new VELatLong(lat1 - 0.1, lon1 + 0.05),
new VELatLong(lat1 - 0.1, lon1 - 0.05)];
var inTheLake = new VELatLong(lat1 - .007, lon1);
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
// このサンプルは、2D モードでのみ機能します (SetCustomIcon で HTML を指定)。
if (map.GetMapMode() != VEMapMode.Mode2D)
{
alert("このサンプルは、2D モードでのみ機能します");
return;
}
map.SetCenterAndZoom(latLong01, 10);
map.SetMapStyle(VEMapStyle.Hybrid);
map.AttachEvent("onclick", ShapeInfo);
AddShapes();
}
function AddShapes()
{
//VEShape オブジェクトを作成し、パラメータを割り当ててマップに追加します。
poly01 = new VEShape(VEShapeType.Polygon, points01);
poly01.SetTitle("poly01");
poly01.SetCustomIcon(
"<span style='font-family:MS PGothic; font-size:x-small;" +
"color:Black; background-color:White'>" +
"<img src='images/boat.jpg'/>poly01</span>");
poly01.SetIconAnchor(inTheLake);
map.AddShape(poly01);
pin02 = new VEShape(VEShapeType.Pushpin, latLong02);
pin02.SetTitle("pin02");
pin02.SetCustomIcon(
"<span style='font-family:MS PGothic; font-size:x-small;" +
"color:Black; background-color:White'>" +
"<img src='images/ski.jpg'/>pin02</span>");
map.AddShape(pin02);
pin03 = new VEShape(VEShapeType.Pushpin, latLong03);
pin03.SetTitle("pin03");
pin03.SetCustomIcon(
"<span style='font-family:MS PGothic; font-size:x-small;" +
"color:Black; background-color:White'>" +
"<img src='images/boat.jpg'/>pin03</span>");
map.AddShape(pin03);
}
function ShapeInfo(e)
{
if(e.elementID != null)
{
shape = map.GetShapeByID(e.elementID);
//Ctrl + クリック イベント (多角形上のアイコンの表示/非表示の切り替え) に応答します。
//なお、プッシュピン シェイプの場合、ShowIcon および HideIcon は無視されます。
if(e.ctrlKey == 1)
{
shape.HideIcon();
}
else
{
shape.ShowIcon();
}
//選択されたシェイプの情報を表示します。
var info = "";
info += "ID (イベント オブジェクト):" + e.elementID + "<br />";
info += "ID (GetID メソッド):" + shape.GetID() + "<br />";
info += "タイプ:" + shape.GetType() + "<br />";
info += "タイトル:" + shape.GetTitle() + "<br />";
icon = shape.GetCustomIcon();
info += "アイコン:" + icon + "<br />";
//プッシュピン シェイプの場合、アイコンのアンカー値は常に
//ピン自体の緯度と経度です。
info += "アイコンのアンカー:" + shape.GetIconAnchor() + "<br />";
label.innerHTML = info;
}
}
</script>
</head>
<body onload="GetMap();" style="font-family:MS PGothic">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
Ctrl + クリックで多角形上のアイコンを非表示にできます。<br />
詳しい情報を表示するには、いずれかのシェイプをクリックしてください。
<div id="label"></div>
</body>
</html>