通过回调中使用的外部CDN加载的全局对象在运行时不可用

作者: 浮华丶
发布时间: 2024-08-23 11:49:15 (1天前)
转自：

3 条回复

0#
回复此人
小鬼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 实际上，除了实例化map对象的行之外，一切都很好。 </p> <pre> <code> const map = new window.Microsoft.Map(document.getElementById("bingMap"), { ^^^^^^^^^^^^^^^^^^^^ credentials: API_KEY }); </code> </pre> <P> 这里有拼写错误， <a href="https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/map-class" rel="nofollow noreferrer"> <code> Map </code> 类 </A> 宣布在 <a href =“https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/?toc=%2Fen-us%2Fbingmaps%2Fv8-web-control%2FTOC .json＆amp; bc =％2Fen-us％2FBingMaps％2Fbreadcrumb％2Ftoc.json“rel =”nofollow noreferrer“> <code> Microsoft.Maps </code> 命名空间 </A> 但是的<strong> 不 </强> 下 <code> Microsoft </code> 您的示例中的命名空间，这就是发生指定错误的原因： </p> <BLOCKQUOTE> <P> TypeError：window.Microsoft.Map不是构造函数 </p> </BLOCKQUOTE> </DIV>

编辑
1#
回复此人
大魔王 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我不知道为什么以前的代码不起作用。即使在运行createMap（）函数之前设置超时5秒之后，Microsoft对象仍然不可用。如果有人能够提供见解，我们将非常感激。但解决方案是将回调包装在一个承诺中。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> import "./styles.css"; let initializedPromise = null //insert div element into DOM const mapDiv = document.createElement("div"); mapDiv.id = "bingMap"; mapDiv.setAttribute("style", "position:relative;width:600px;height:400px;"); document.body.appendChild(mapDiv); const insertBingScriptIntoDom = () => { const bingScript = document.createElement("script"); bingScript.type = "text/javascript"; bingScript.src = "https://www.bing.com/api/maps/mapcontrol?callback=onLoadApi; document.body.appendChild(bingScript); }; const initApi = () => { if (!initializedPromise) { initializedPromise = new Promise((resolve, reject) => { window.onLoadApi = () => { resolve() } }) insertBingScriptIntoDom() } return initializedPromise } const createMap = async () => { await initApi() new window.Microsoft.Maps.Map(mapDiv, { credentials: <API KEY>, center: window.Microsoft.Maps.Location(41.6, 2.9) }) } createMap() </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论