Bing地圖.v7如何使用地圖之外的鏈接引用圖釘？

我有一個兵地圖中，我有一組圖釘，與每一個相關的資訊盒。我正在使用v7。Bing地圖.v7如何使用地圖之外的鏈接引用圖釘？

我想有一個鏈接，是地圖顯示特定圖釘的信息框外。如何才能做到這一點？

示例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 
    /* Define a style used for infoboxes */ 
    .NSIMInfoBox 
    { 
    position: absolute; 
    border: solid 2px black; 
    background-color: White; 
    z-index: 1000; 
    padding: 5px; 
    width: 250px; 
    visibility: visible; 
    } 
    #mapDiv 
    { 
    position: relative; 
    top: 20; 
    left: 20; 
    width: 800px; 
    height: 800px; 
    border: solid 2px #555; 
    } 
</style> 
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"> 

</script> 
<script type="text/javascript" src="jquery-1.5.2.min.js"></script> 

</script> 
<script> 
    $(document).ready(function() { 
     getMap(); 
    }); 

    var pinInfobox = null; 
    var map; 
    var pin; 

    function getMap() { 
     map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
      { credentials: "apikey", 
       center: new Microsoft.Maps.Location(45.5, -122.5), 
       zoom: 10, 
       showScaleBar: true, 
       mapTypeId: Microsoft.Maps.MapTypeId.road 
      }); 


     //   //Multiple locations 
     //   var polygonWithPins = new Microsoft.Maps.EntityCollection(); 
     var loc1 = new Microsoft.Maps.Location(45.5, -122.5); 
     var loc2 = new Microsoft.Maps.Location(45.6, -122.5); 

     pin = new Microsoft.Maps.Pushpin(loc1); 
     //Microsoft.Maps.Events.addHandler(pin, 'click', displayEventInfo); 
     pin.setInfoBox(new InfoBox("<strong>Pushpin Number1!</strong>")); 
     map.entities.push(pin) 

     var pin2 = new Microsoft.Maps.Pushpin(loc2); 
     pin2.setInfoBox(new InfoBox("<strong>Pushpin Number 2!</strong>")); 
     map.entities.push(pin2) 


    } 

     function InfoBox(html) { 
      this.div; 
      this.html = html; 
     } 

     InfoBox.prototype.show = function (e) { 
      if (this.div == undefined) { 
       //Create container div 
       this.div = document.createElement("div"); 
       this.div.className = "NSIMInfoBox"; 
       this.div.innerHTML = createInfoBox(this.html); 
       this.div.style.display = ""; 
       var mapDiv = document.getElementById('mapDiv'); 
       mapDiv.appendChild(this.div); 
      } 

      var pinLocation = map.tryLocationToPixel(e.target.getLocation(), Microsoft.Maps.PixelReference.control); 

      this.div.style.left = pinLocation.x + "px"; 
      this.div.style.top = pinLocation.y + "px"; 
      this.div.style.visibility = "visible"; 
      this.div.style.display = "block"; 
     }; 

     InfoBox.prototype.hide = function (e) { 
      if (this.div != undefined) { 
       this.div.style.visibility = "hidden"; 
      } 
     }; 

     //Extend pushpinclass 
     Microsoft.Maps.Pushpin.prototype.setInfoBox = function (infoBox) { 
      if (typeof this.infoBox != undefined && this.infoBox != undefined && this.infoBox != null) { 
       this.removeInfoBox(); 
      } 

      // Add handlers for mouse events 
      this.mouseoverHandler = Microsoft.Maps.Events.addHandler(this, 'click', 
      function (e) { infoBox.show(e); } 
      ); 
      this.mouseoutHander = Microsoft.Maps.Events.addHandler(this, 'mouseleave', 
      function (e) { infoBox.hide(e); } 
      ); 
     }; 

     // Extend the Pushpin class to remove an existing InfoBox object 
     Microsoft.Maps.Pushpin.prototype.removeInfoBox = function() { 
      this.infoBox = null; 

      // Remove handlers for mouse events 
      Microsoft.Maps.Events.removeHandler(this.mouseoverHandler); 
      Microsoft.Maps.Events.removeHandler(this.mouseoutHander); 
     } 

     function createInfoBox(html) { 
      var myHtml; 
      myHtml = '<div style="text-align:right; margin-right: 5px;" onclick="closeInfoBox();">x</div>' + 
       '<div style="padding: 5px;">' + html + '</div>'; 

      return myHtml; 
     } 

     function closeInfoBox() { 
      $('.NSIMInfoBox').hide(); 
     } 


</script> 
</head> 
<body> 
    <div id="mapDiv" class="map"></div> 
    <span class="click">click me! - HERE I WANT TO SHOW THE FIRST PIN'S INFOBOX</span> 
</body> 
</html>

來源

2011-09-02 javisrk

這是我如何能夠解決這個問題 -

因爲我推銷插入EntityCollection，我能夠通過收集分析，然後調用invoke方法，以獲得引用圖釘

樣品：

  var newpin = map.entities.get(i); 
      Microsoft.Maps.Events.invoke(newpin, 'click', '');

來源

2011-10-03 14:20:10 javisrk

我應該需要從這裏經過什麼'的點擊我一直在尋找的結果我！ - 這裏我想展示第一個密碼的信箱'以上樣品：打開信息框。 – dev

我沒有試過，但我希望它可以工作。基本上你可以在圖釘對象上模擬鼠標事件。

首先，創建一個圖釘時，一定要通過設置在圖釘選項對象TypeName屬性上所產生的設置一個類名。這將允許您通過使用css選擇器#mapDiv div來獲得由此產生的div。

然後您可以創建一個事件並在div上調度它，它將向地圖控件指示它應該顯示信息與圖釘相關聯。由於您使用jQuery的，我認爲這將是沿東西線（響應您的鏈接點擊事件是地圖控制之外）：

// assuming the typeName you used was "foo" 
$('#mapDiv div.foo').trigger($.event('mousemove'));

您可能必須嘗試之前發行的鼠標懸停/而不是鼠標移動。這也是一種潛在方法的總體思路......希望它能在解決方案中產生。

來源

2011-09-26 12:05:38

看到我自己的答案，看我做什麼...... – javisrk

Bing地圖.v7如何使用地圖之外的鏈接引用圖釘？

回答

相關問題