Infobox für Bing Maps

Question

Ich arbeite gerade an einer Bing Maps-Anwendung und ich kann nicht scheinen, die Info-Box zu erscheinen, wenn der Benutzer auf den Pin klickt. Ich habe das SDK verfolgt und es sollte fast genau so sein. Heres, was ich habe:

// *********************************** 
// Function creates a single pin 
// and returns a reference to the pin 

function createMapPin(latLong, sName) { 
    var pinImg = "imagespins/Good.png"; 


var pin = new Microsoft.Maps.Pushpin(latLong, { 
    icon: pinImg, 
    anchor: new Microsoft.Maps.Point(8, 8), 
    draggable: true, 
    width: 48, 
    height: 48 
}); 

pin.title = sName; 


pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), 
      { title: 'My Pushpin', 
       description: 'This pushpin is located at (0,0).', 
       visible: false, 
       offset: new Microsoft.Maps.Point(0, 15) 
      }); 



// Add handlers for the pushpin events 
    Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox); 
// Hide the infobox when the map is moved. 
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox); 

map.entities.push(pin); 
map.entities.push(pinInfobox); 

    return pin; 
} 

function displayInfobox(e) { 
    pinInfobox.setOptions({ visible: true }); 
} 


function hideInfobox(e) { 
    pinInfobox.setOptions({ visible: false }); 
} 

Die Stifte bekommen erstellt und hinzugefügt erfolgreich auf die Karte, und wenn der Benutzer auf den Stift klickt macht es die dispayInfoBox Methode eingeben, sondern die messagebox nur scheinen doesnt zu erscheinen.

Alle Vorschläge sind sehr appreactiate. Vielen Dank!

Answer 1

Ihr Code funktioniert, ich habe es versucht, solange Sie nur createMapPin() einmal anrufen. Aber nach Ihrem Code zu urteilen, ist es Ihre Absicht, createMapPin() mehrere Male zu rufen, und dies wird dazu führen, dass sich das nicht mehr so ​​verhält, wie Sie es sich vorstellen. Der Grund dafür ist diese Zeile:

pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), 
      { title: 'My Pushpin', 
       description: 'This pushpin is located at (0,0).', 
       visible: false, 
       offset: new Microsoft.Maps.Point(0, 15) 
      }); 

, da Sie nicht pinInfobox als lokaler Variable über das var Schlüsselwort deklarieren haben, es wird implizit als globale Variable deklariert. Ich glaube nicht, dass dies Ihre Absicht ist, denn sobald Sie wieder createMapPin() anrufen, pinInfobox, weil es eine globale Variable ist, wird überschrieben. Obwohl Sie immer neue Infoboxen erstellen, gibt es nur eine Instanz und es werden immer neue Werte zugewiesen. Wenn Sie also auf einen Pin klicken, erscheint die eine Infobox wahrscheinlich irgendwo außerhalb des Bildschirms und Sie sehen sie nicht. Ich glaube, Ihre Absicht ist, eine Infobox mit jedem Reißzwecke verbunden zu haben? Um dies zu tun, müssen Sie die Info-Box als eine lokale Variable deklarieren, etwa so:

var pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), 
     { title: 'My Pushpin', 
      description: 'This pushpin is located at (0,0).', 
      visible: false, 
      offset: new Microsoft.Maps.Point(0, 15) 
     }); 

Sie auch benötigen, um Ihre Event-Handler zu ändern mit der lokalen Version des infobox Objekts zu interagieren und nicht nur die einzelnen Globale Variable. Der einfachste Weg zu tun, ist nur Ihre Event-Handler als anonyme Funktionen im Rahmen Ihrer createMapPin() Funktion zu deklarieren, und außer Kraft gesetzt, die Bedeutung der dieses Schlüsselwort mit der Funktion Bindung:

Microsoft.Maps.Events.addHandler(pin, 'click', function (e) { 
    this.setOptions({ visible: true }); 
} .bind(pinInfobox)); 
Microsoft.Maps.Events.addHandler(map, 'viewchange', function(e) { 
    this.setOptions({ visible: false }); 
}.bind(pinInfobox)); 

so ist hier Ihr aktualisierte Code:

function createMapPin(latLong, sName) { 
    var pinImg = "imagespins/Good.png"; 

    var pin = new Microsoft.Maps.Pushpin(latLong, { 
     icon: pinImg, 
     anchor: new Microsoft.Maps.Point(8, 8), 
     draggable: true, 
     width: 48, 
     height: 48 
    }); 

    pin.title = sName; 

    var pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), 
     { 
      title: 'My Pushpin', 
      description: 'This pushpin is located at (0,0).', 
      visible: false, 
      offset: new Microsoft.Maps.Point(0, 15) 
     }); 

    // Add handlers for the pushpin events 
    Microsoft.Maps.Events.addHandler(pin, 'click', function(e) { 
     this.setOptions({ visible: true }); 
    }.bind(pinInfobox)); 
    // Hide the infobox when the map is moved. 
    Microsoft.Maps.Events.addHandler(map, 'viewchange', function(e) { 
     this.setOptions({ visible: false }); 
    }.bind(pinInfobox)); 
    map.entities.push(pin); 
    map.entities.push(pinInfobox); 
    return pin; 
}