2009-06-30 71 views
2

我有一個虛擬地球地圖(Bing Maps ??),我添加了一組圖釘。每個圖釘標記爲1到n。除了向地圖添加圖釘之外,我還向包含每個圖釘描述的網頁添加文字。Bing地圖 - 如何鏈接到地圖以外的鏈接的圖釘

我想添加一個鏈接到地圖以外的文本,點擊時會打開與相應的圖釘相關的氣球。

如何通過地圖之外的鏈接打開與圖釘關聯的氣球?我的地圖:link。當你點擊加載時,PushPins被添加到地圖中。我想從地圖右側的列表中找到一個鏈接,打開相應的PushPin。

在此先感謝!

回答

3

下面是使用Bing地圖爲地圖添加一些形狀的簡單示例,並在地圖旁邊的列表中顯示每個形狀的「標題」。然後,當用戶將鼠標懸停在列表中的每個項目上時,它將在地圖上打開該Shape的InfoBox。

<!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

這看起來應該起作用 - 我會將您的答案標記爲答案,一旦我進行測試 - 謝謝。 – 2009-07-16 14:38:04

0

如何使用Silverlight bing地圖在彈出窗口中顯示信息?