2011-10-05 16 views
6

Estoy intentando agregar varios marcadores con un cuadro de información separado. eso significa que cada marcador tendrá su propio cuadro de información con información propia. hay un loop.inside queMúltiples marcadores con infobox en 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); 

problema es que está mostrando la última caja de información única para cada marcador. Supongamos que tengo 4 marcadores en Londom, Francia, Alemania, Estados Unidos. ahora no importa en qué pin he hecho clic, solo se muestra el cuadro de información de América en el marcador de Estados Unidos. Por favor, ¿alguien puede ayudarme con lo que me he perdido .........

Y una cosa más, puede Alguien por favor muestre la forma de usar htmlContent en la caja de información. He tratado de establecer que thrugh opción, pero no es woring ......

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

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

Por favor, ayudar ........

Respuesta

35

Así es como he implementado múltiples de Ficha:

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

al final, obtendrá algo como esto: enter image description here

0

Corrección: pin.Title = "TITLE:" + i; // generalmente el título del cuadro de información

Cuestiones relacionadas