异步加载Nokia API
异步加载Nokia API
提问于 2012-12-17 21:27:47
我试图异步加载Nokia：
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.async = true;
oScript.src = "http://api.maps.nokia.com/2.2.3/jsl.js?with=maps,positioning,placesdata";
document.body.appendChild(oScript);正如预期的那样，它无法立即工作，所以我尝试过重写document.write，认为这可能是问题所在，但没有效果(例如，我做了这个https://stackoverflow.com/a/7884407/1741150)。
我遇到的错误是，基本上没有定义nokia.maps.map (因此，我不能使用：
new nokia.maps.map.Display();是否有办法做到这一点，或者说有人曾经设法做到这一点？我可能漏掉了什么
编辑:我实际上是在尝试在页面中异步编写脚本，而不是异步创建映射(这当然不是问题)
谢谢,
回答 2
Stack Overflow用户
发布于 2013-02-26 16:36:02
这里是JavaScript (3.0)的映射API
这里更新的3.0MapsAPI用于JavaScript是很好的模块化，并且完全支持异步加载。例如，可以使用所需加载一个简单的地图，如下所示：
require(['mapsjsService','mapsjsEvents', 'mapsjsUi'], function () {
var platform = new H.service.Platform({
app_id: '<YOUR APP ID>',
app_code: '<YOUR TOKEN>'
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map);
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
});需要按以下方式分配配置文件：
requirejs.config({
baseUrl: '.',
waitSeconds: 0,
map: {
'*': {
'css': 'require-css' // or whatever the path to require-css is
}
},
paths: {
'mapsjsCore' : 'https://js.api.here.com/v3/3.0/mapsjs-core',
'mapsjsService' : 'https://js.api.here.com/v3/3.0/mapsjs-service',
'mapsjsEvents' : 'https://js.api.here.com/v3/3.0/mapsjs-mapevents',
'mapsjsUi' :'https://js.api.here.com/v3/3.0/mapsjs-ui',
'mapsjsCss' :'https://js.api.here.com/v3/3.0/mapsjs-ui',
},
shim: {
'mapsjsService': {
deps: ['mapsjsCore']
},
'mapsjsEvents': {
deps: ['mapsjsCore']
},
'mapsjsUi': {
deps: ['mapsjsCore', 'css!mapsjsCss']
}
}
});可以看到，所有模块都依赖于mapsjsCore，但没有一个子模块相互依赖。mapsjsUi是一个特例，因为它有一个与默认外观相关的CSS文件。您可以将默认的CSS (或覆盖)保存在标头中，也可以使用需求插件(如要求-css )加载它。应该注意的是，配置中需要行waitSeconds:0以避免首次将JavaScript库的HERE Maps下载到浏览器时超时，因为它们不会在本地找到，因此您至少需要依赖internet连接的速度一次。
或者使用Jquery：
$.getScript('https://js.api.here.com/v3/3.0/mapsjs-core.js', function() {
$.getScript('https://js.api.here.com/v3/3.0/mapsjs-service.js', function() {
$.getScript('https://js.api.here.com/v3/3.0/mapsjs-mapevents.js', function() {
$.getScript('https://js.api.here.com/v3/3.0/mapsjs-mapevents.js', function() {
////
//
// Don't forget to set your API credentials
//
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: true
});
//
//
/////
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map, {
center: {
lat: 50,
lng: 5
},
zoom: 4
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
});
});
});
});body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css"
href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />
</head>
<body>
<div id="map"></div>
</body>
诺基亚地图API用于JavaScript (2.2.4-2.5.4)
最近被废弃的版本的Nokia用于JavaScript (版本2.2.4及更高版本)支持异步加载，如下所示
详细信息可以在Feature.load的Feature.load方法中找到--一个是为了成功(您可以继续添加App ID和令牌、显示地图等)，另一个是失败的回调。
// this is our initial script that will load jsl.js
var oScript = document.createElement("script"),
//once the jsl.js is load, we load all features
onScriptLoad = function() {
nokia.Features.load(
// here we get all features (provide one or many "with" parameters
nokia.Features.getFeaturesFromMatrix(["all"]),
// an callback when everything was successfully loaded
onApiFeaturesLoaded,
// an error callback
onApiFeaturesError,
// a target document (or null if the current document applies)
null,
// a flag indicating that loading should be asynchronous
false
);
},
// once all features we loaded, we can instantiate the map
onApiFeaturesLoaded = function() {
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you
// register on http://api.developer.nokia.com/
//
nokia.Settings.set("appId", "YOUR APP ID");
nokia.Settings.set("authenticationToken", "YOUR TOKEN");
//
/////////////////////////////////////////////////////////////////////////////////////
var mapContainer = document.getElementById("mapContainer");
var map = new nokia.maps.map.Display(mapContainer, {
center: [40.7127, -74.0059],
zoomLevel: 13,
components: [new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Behavior(),
]
});
},
// if an error occurs during the feature loading
onApiFeaturesError = function(error) {
alert("Whoops! " + error);
};
oScript.type = "text/javascript";
// NOTE: tell jsl.js not to load anything by itself by setting "blank=true"
oScript.src = "http://api.maps.nokia.com/2.2.4/jsl.js?blank=true";
// assign the onload handler
oScript.onload = onScriptLoad;
//finally append the script
document.getElementsByTagName("head")[0].appendChild(oScript); body {
margin: 0;
padding: 0;
}
#mapContainer {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Asynchronous Loading</title>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>
Stack Overflow用户
发布于 2012-12-18 10:19:20
您应该看看jHERE库，如果您想使用Nokia，它将为您提供一个流畅的异步加载，以及一系列很酷的其他特性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13922469
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号