2011-10-05 3 views
6

Я пытаюсь добавить несколько pushpin с отдельными инфобоксами. это означает, что каждая кнопка будет иметь свои собственные инфобокс с собственной информацией. есть loop.inside чтоНесколько Pushpin с инфобоксами в Bing Map

latlng = new Microsoft.Maps.Location(latitude[pointerCount], longtitue[pointerCount]); 
MarkingLocation[pointerCount] = new Microsoft.Maps.Pushpin(latlng, {icon:"marker2.ico", height:50, width:50, anchor:new Microsoft.Maps.Point(0,50)}); 

myInfobox = new Microsoft.Maps.Infobox(latlng, myinfoboxOption); 

Microsoft.Maps.Events.addHandler(MarkingLocation[pointerCount], 'click', function() {myInfobox.setOptions({ visible:true });});   
map.entities.push(MarkingLocation[pointerCount]); 
map.entities.push(myInfobox); 

Проблема заключается в том, что он показывает последний инфобокс только для каждой канцелярской кнопки. Предположим, у меня 4 кнопки в Лондоме, Франции, Германии, Америке. теперь независимо от того, какой контакт я щелкнул, он только показывает американскую инфобокс на America pushpin.please может кто-нибудь помочь, что я пропал без вести .........

И еще одна вещь, может любой, пожалуйста, покажите способ использования htmlContent в инфобоксах. Я попытался установить его thrugh вариант, но это не woring ......

myinfoboxoption = {width:300, 
           height: 100, 
           title: str_loc, 
           htmlContent: htmlc, 
           showPointer: false, 

           offset: new Microsoft.Maps.Point(-100,0)}; 

Пожалуйста, помогите ........

ответ

35

Это, как я реализовал несколько инфобокс:

<html> 
<head> 
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> 
<script> 
    var pinInfoBox; //the pop up info box 
    var infoboxLayer = new Microsoft.Maps.EntityCollection(); 
    var pinLayer = new Microsoft.Maps.EntityCollection(); 
    var apiKey = "YourKey"; 

    function GetMap() { 

     map = new Microsoft.Maps.Map(document.getElementById("map"), {credentials: apiKey}); 

     // Create the info box for the pushpin 
     pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false }); 
     infoboxLayer.push(pinInfobox); 


     for (var i = 0 ; i < 10; i++){ 
      //add pushpins 
      var latLon = new Microsoft.Maps.Location(Math.random()*180-90, Math.random()*360-180); 
      var pin = new Microsoft.Maps.Pushpin(latLon); 
      pin.Title = name;//usually title of the infobox 
      pin.Description = "blahblahblah, "+ i; //information you want to display in the infobox 
      pinLayer.push(pin); //add pushpin to pinLayer 
      Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox); 
     } 

     map.entities.push(pinLayer); 
     map.entities.push(infoboxLayer); 

    } 

    function displayInfobox(e) { 
     pinInfobox.setOptions({title: e.target.Title, description: e.target.Description, visible:true, offset: new Microsoft.Maps.Point(0,25)}); 
     pinInfobox.setLocation(e.target.getLocation()); 
    } 

    function hideInfobox(e) { 
     pinInfobox.setOptions({ visible: false }); 
    } 
</script> 

<style> 
    #map { position: absolute; top: 20; left: 10; width: 700px; height: 500px; border:#555555 2px solid;} 
</style> 
</head> 
<body onload="GetMap()"> 
    <div id="map"> 
    </div> 
</body> 

В конце концов, вы получите что-то вроде этого: enter image description here

0

Исправление: pin.Title = "TITLE:" + i; // обычно заголовок инфобокса

Смежные вопросы