Jquery getscript後Javascript API無法正常工作

我正在嘗試使用JavaScript Maps API。我開始創建一個小網頁，調用API來顯示地圖並添加標準標記。工作很好。現在我想在SharePoint中使用它，使用JSLink作爲列表。所以，我提出的JQuery在SharePoint上可用的和寫的東西是這樣的：Jquery getscript後Javascript API無法正常工作

$.getScript("http://js.cit.api.here.com/se/2.5.3/jsl.js?with=maps", function() { 
nokia.Settings.set("app_id", "MY APP ID"); 
nokia.Settings.set("app_code", "MY APP CODE"); 
// Use staging environment (remove the line for production environment) 
nokia.Settings.set("serviceMode", "cit"); 

var mapContainer = document.getElementById("mapContainer"); 

var map = new nokia.maps.map.Display(mapContainer, { 
    // initial center and zoom level of the map - Around U2U. 
    center: [50.886944, 4.263056], 
    zoomLevel: 10 
}); 
});

nokia.maps.map這裏返回undefined。在一個普通的代碼塊中使用這個，用腳本標籤來引用api可以正常工作。這是怎麼回事？？

來源

2014-02-05 user3276080

似乎不是SharePoint相關的，因爲我在ASP.NET中遇到同樣的問題 - >在getscript使nokia.maps.map undefined後調用api。 – user3276080

Maps API的異步加載比這稍微複雜一些，因爲儘管您已將引導庫腳本添加到頁面，但在嘗試啓動認證之前，您尚未等待maps模塊本身加載。

1）首先，您需要像在代碼中一樣將<script>添加到標頭。請注意，該URL有額外的blank=true參數，因此只有引導程序已加載。

function asyncLoadMapsLibrary() { 
    $.getScript('http://js.cit.api.here.com/se/2.5.4/jsl.js?blank=true', 
    hereMapLoaderCallback); 
}

2）然後在引導回調你可以決定哪些功能要加載並使用nokia.Features.load()異步初始化 - onApiFeaturesLoaded()是這個回調回調。

function hereMapLoaderCallback() { 
    var fmatrix = nokia.Features.getFeaturesFromMatrix(['maps']), 

    // This callback is run if the feature load was successful. 
    onApiFeaturesLoaded = function() { 
     authenticate(HereMapsConstants.AppIdAndToken); 
     var map = createMap(
     document.getElementById('mapContainer')); 
     map.addListener('displayready', function() { 
     afterHereMapLoad(map); 
     }, false); 
    }, 
    // This callback is run if an error occurs during the feature loading 
    onApiFeaturesError = function (error) { 
     alert('Whoops! ' + error); 
    }; 
    nokia.Features.load(
    fmatrix, 
    onApiFeaturesLoaded, // an callback when everything was successfully loaded 
    onApiFeaturesError, // an error callback 
    null, // Indicates that the current document applies 
    false //Indicates that loading should be asynchronous 
); 
}

3）在這一點上，你可以用你的app_id和app_code做認證。請注意，此特定示例使用CIT環境。如果您使用的是實時環境，請刪除第set('serviceMode', 'cit')行並修改第1步中引用的<script>標記。

function authenticate(settings) { 
    // Add your own appId and token here 
    // sign in and register on http://developer.here.com 
    // and obtain your own developer's API key 
    nokia.Settings.set('app_id', 'YOUR_APPID'); 
    nokia.Settings.set('app_code', 'YOUR_TOKEN'); 

    // Use staging environment (remove the line for production environment) 
    nokia.Settings.set('serviceMode', 'cit'); 
    // The language of the map can be changed here. 
    nokia.Settings.set('defaultLanguage', settings.language); 
}

4）現在你可以

function createMap(domElement) { 
    var map = new nokia.maps.map.Display(domElement, { 
    center: [50.886944, 4.263056], 
    zoomLevel: 10, // Bigger numbers are closer in 
    components: [ // We use these components to make the map interactive 
     new nokia.maps.map.component.ZoomBar(), 
     new nokia.maps.map.component.Behavior() 
    ] 
    }); 

    return map; 
}

5）最後只有創建地圖一旦地圖即可顯示在第三添加必要的內容回調

map.addListener('displayready', function() { 
    // Callback code goes here, add markers etc. 
}

可以找到一個工作示例here

來源

2014-02-06 11:55:20

Jquery getscript後Javascript API無法正常工作

回答

相關問題