2009-06-30 9 views
2

私には、プッシュピンのセットを追加したVirtual Earth Maps(Bing Maps ??)があります。各ピンは1〜nのラベルが付けられています。マップにプッシュピンを追加するだけでなく、各プッシュピンの説明を含むテキストもWebページに追加します。Bing Maps - マップ外のリンクからプッシュピンにリンクする方法

マップ外のテキストへのリンクを追加したいと思います。クリックすると、対応するプッシュピンに関連付けられたバルーンが開きます。

マップ外に存在するリンクを使用して、プッシュピンに関連付けられたバルーンを開くにはどうすればよいですか?

もっと理解を深めるには、私の地図:linkをご覧ください。ロードをクリックすると、PushPinsがマップに追加されます。マップの右側にあるリストから、対応するPushPinを開くリンクを希望します。

ありがとうございます!

答えて

3

ここでは、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> 
+0

これはうまくいくように見えます。テストしたら答えをあなたの印としてマークします。ありがとうございます。 –

+0

サーバサイドコードでシェイプを追加するとどうなりますか? シェイプIDはどのように取得しますか? –

0

Silverlightのビンマップを使用してポップアップに情報を表示する方法はありますか?

関連する問題