ここでは、Bingマップを使用してマップにいくつかの図形を追加し、マップの隣のリストに各図形の「タイトル」を表示する簡単な例を示します。次に、ユーザーがリスト内の各項目を移動すると、マップ上のそのシェイプのインフォボックスが開きます。
<!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://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
<style type="text/css">
#ShapeList div
{
padding: 4px;
border: solid 1px black;
}
</style>
<script type="text/javascript">
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
// Add some Shapes to the Map with item in list next to map
var latlong = map.GetCenter();
AddShape("Test Pushpin", latlong);
AddShape("Another Pushpin", new VELatLong(latlong.Latitude + 2, latlong.Longitude));
AddShape("Still Another Pushpin", new VELatLong(latlong.Latitude - 2, latlong.Longitude));
}
function AddShape(title, latlong) {
// Create Pushpin Shape
var s = new VEShape(VEShapeType.Pushpin, latlong);
s.SetTitle(title);
// Add Shape to Map
map.AddShape(s);
// Display Item in List Next to Map
var elem = document.createElement("div");
elem.innerHTML = title;
document.getElementById("ShapeList").appendChild(elem);
var shapeID = s.GetID();
elem.attachEvent("onmouseover", function() { ShowInfoBoxByShapeID(shapeID); });
elem.attachEvent("onmouseout", function() { map.HideInfoBox(); });
}
function ShowInfoBoxByShapeID(shapeID) {
var shape = map.GetShapeByID(shapeID);
map.ShowInfoBox(shape);
}
</script>
</head>
<body onload="GetMap();">
<div id="ShapeList" style="float: left">
</div>
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
これはうまくいくように見えます。テストしたら答えをあなたの印としてマークします。ありがとうございます。 –
サーバサイドコードでシェイプを追加するとどうなりますか? シェイプIDはどのように取得しますか? –