Bing 地图的 SDK

Question

我目前正在创建一个 SDK 来使用 Bing 地图。当我运行 SDK 时，bing 地图不显示。

文件 "component.js" 包含以下内容：

define(["sap/designstudio/sdk/component","d3"], function(Component,d3, unusedDummy) {
Component.subclass("com.xxx.bingmaps.BingMaps", function() {

 this.init = function() {

    var url = 'http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[MY_BING_KEY]'; 

        const script = document.createElement("script");
        script.type = 'text/javascript';
        script.src = url; 
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);

        function GetMap() {
            this.map = new Microsoft.Maps.Map('#myMap', {
              center: new Microsoft.Maps.Location(52.527222, 13.4225),
              mapTypeId: Microsoft.Maps.MapTypeId.aerial,
              zoom: 10
          });

        };
    };

   });
});

在文件"contribution.xml"中，这是由以下代码调用的

<requireJs modes="commons m">res/js/component</requireJs>

有没有人知道错误在哪里？

亲切的问候，蒂莫

这是我的新代码：

define(["d3", "sap/designstudio/sdk/component"], function(d3, Component) {  

function GetMap() {
    var map = new Microsoft.Maps.Map('#BingMaps', {         
    center: new Microsoft.Maps.Location(52.527222, 13.4225),
    mapTypeId: Microsoft.Maps.MapTypeId.aerial,
    zoom: 10
    });
};   

Component.subclass("com.xxx.bingmaps.BingMaps", function() {

    this.init = function() {

        var url = 'https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[MY_KEY]'; 

        const script = document.createElement("script");
        script.type = 'text/javascript';
        script.src = url; 
        script.async = true;
        script.defer = true; 
        document.head.appendChild(script);

    };
      GetMap();

});
});

Answer 1

GetMap 函数在 init 函数内部，不是全局函数。因此，当加载地图脚本 URL 时，它无法 find/access GetMap 函数。几个选项：

使 GetMap 函数成为全局函数。
同步加载脚本 URL 并调用代码以内联加载地图。

Answer 2

同时，我已经解决了如下问题。

文件contribution.xml:

<jsInclude>http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[MY_KEY]</jsInclude>     
<jsInclude>res/js/component.js</jsInclude>

文件component.js:

sap.designstudio.sdk.Component.subclass("com.xxx.bingmaps.BingMaps", function() {

this.init = function() {
    var mapOptions = { center: new Microsoft.Maps.Location(LAT, LONG),
    mapTypeId: Microsoft.Maps.MapTypeId.aerial,
         zoom: 15 };
    this.map = new Microsoft.Maps.Map(this.$()[0], mapOptions);             
    };
});

现在，显示 bing 地图。

Bing 地图的 SDK

SDK for Bing Maps

sdk

bing-maps

requirejs

sap-lumira