Question

好的，所以我一直在寻找解决方案，我相信有人会说这是一个重复的主题，但我很困惑为什么这不起作用。

这是我现在拥有的代码的基本示例

main.html中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="main.js"></script>
</head>

<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
<script>
    var url = 
    //'http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=GetMap';
    'https://www.bing.com/mapspreview/sdk/mapcontrol';
    loadScript(url, test_function);
    function test_function() {
        console.log('inside test_function before map');
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: 'My Bing Maps Key'});
        console.log('inside test_function after map');
    };
</script>

</html>

main.js

function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";
    script.async = true;
    script.defer = true;

    if (script.readyState){  //IE
        console.log('inside IE block');
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        console.log('inside Other block');
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

控制台输出

main.js:18 inside Other block
main.html:17 inside test_function before map
mapcontrol:11 Uncaught TypeError: Cannot read property 'prototype' of null
    at k (mapcontrol:11)
    at n.h [as create] (mapcontrol:11)
    at e (mapcontrol:11)
    at t.l [as instance] (mapcontrol:11)
    at n.h [as create] (mapcontrol:11)
    at e (mapcontrol:11)
    at t.l [as instance] (mapcontrol:11)
    at new Microsoft.Maps.Map (mapcontrol:13)
    at test_function (main.html:18)
    at HTMLScriptElement.script.onload (main.js:20)

我可以得到一个基本的例子，但是当我尝试这种创建脚本元素并附加它的方法时，我什么也得不到。由于这是在较大的应用程序中实现的方式，这来自第7版，我不是要重新构建它。

我尝试过像jQuery getScript这样的东西。

请让我知道你的想法！感谢。

Answer 1

我能想到的第一件事就是你应该从公开发布的问题中删除你的凭据。只是一个想法。

其次，错误是由于在加载地图之前尝试与地图交互。

我个人以前从未见过以这种方式加载的脚本，但我认为它有效 - 至少在某些情况下，但可能不是这个。我认为你有理由这样做。

无论如何，由于我对此缺乏了解，我只能假设正在发生的事情是正在加载脚本并且正在调用您的回调（test_function），因为代码似乎表明了它。

但是，我怀疑，正在加载的脚本和正在加载的 Bing Maps 是两种不同的东西。

您最初使用&callback=GetMap注释掉的网址是异步加载Bing地图的记录方式。完成加载后，Bing Maps将调用GetMap函数。使用此特定代码，callback=test_function将是您想要的。

所以test_function应该由Bing Maps本身启动，而不是通过你的脚本加载函数传递（再次，假设它是如何工作的）。我想，加载函数实际上并不想做除了使用该脚本之外的任何事情，因此没有回调方法; Bing Maps将为您处理。

这里有一个Plunker供你使用。

bing map v7 to v8 migration - 脚本导入问题

1 个答案: