Bing Karten ist nach dem Laden ihrer JavaScript-Datei undefiniert

Question

Ich lade das Bing Map API Skript dynamisch. Wenn das Skript fertig geladen ist, möchte ich meine Karte erstellen. Das Problem ist, dass Microsoft und Microsoft.Maps definiert sind, aber Microsoft.Maps.Map nicht. Mir ist bewusst, dass ihr Skript zusätzlich weitere Skripts asynchron lädt, aber selbst nachdem ich 10 Sekunden auf diese zusätzlichen hypothetischen Skripts gewartet habe, bleibt Microsoft.Maps.Map weiterhin undefiniert. Wie also lade ich ihre Map Klasse? In ihrem Beispiel sehe ich nichts, das die Klasse explizit lädt.

Javascript (Prototype Framework):

var script = new Element(
    'script', {
        type: 'text/javascript',
        src: 'http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'
    }
);

script.observe(
    'load',
    function(event) {
        console.info(Microsoft);
        console.info(Microsoft.Maps);
        console.info(Microsoft.Maps.Map);
    }
);

document.body.appendChild(script);

Konsolenausgabe:

>>>  Microsoft
Object { Maps={...}}
>>>  Microsoft.Maps
Object { Globals={...}}
>>>  Microsoft.Maps.Map
undefined

Answer 1

Cbayram hat recht, dass du zu früh schaust. Aber speziell verwendest du nicht die Bing Map-spezifische Methode, um dein Skript zu starten, sobald ihres geladen ist (onscriptload). Wir vermeiden globale Funktionen, aber meines Wissens musst du hier wirklich eine verwenden.

Versuch es mal so:

var script = new Element(
    'script', {
        type: 'text/javascript',
        src: 'http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=DrawMap'
    }
);

function DrawMap() {
   console.info(Microsoft);
   console.info(Microsoft.Maps);
   console.info(Microsoft.Maps.Map);
}

document.body.appendChild(script);

Nicht wichtig, aber warum fügst du es zum body hinzu? Ich füge es immer zum head hinzu.

Answer 2

Die JavaScript-Datei der BING Map API lädt/dynamisch weitere JS- und CSS-Dateien in Ihre Seite ein.

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20121012100453.93/js/de-de/veapidelay.js">
<link rel="stylesheet" type="text/css" rev="stylesheet" href="http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20121012100453.93/css/de/mapdelay.css">
<link rel="stylesheet" type="text/css" rev="stylesheet" href="http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20121012100453.93/css/de/mapcontrol.css">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20121012100453.93/js/de-de/veapiAnalytics.js"> 
</code></pre>

<p>Die Map-Funktion/Objekt scheint in</p>

<pre><code>http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20121012100453.93/js/de-de/veapicore.js
</code></pre>

<p><strong>EDIT:</strong></p>

<p>Ihr script.observe wird ausgeführt, wenn die erste (initiale) JS-Datei geladen wird. Es ist zu früh für die Map-Funktion, da sie in der veapicore.js instanziiert wird, die anschließend von der initialen mapcontrol.ashx?v=7.0 geladen wird. Du schaust einfach zu früh nach diesem Map-Objekt.</p></x-turndown>