如何在Worklight应用程序上显示Google Map [英] How to display a Google Map on Worklight App
问题描述
我在Worklight中有以下文件。我想要在Worklight应用程序中加载地图。它在设计视图中可见，但在模拟器和仿真器上均不可见。
// index.html
< div id =pagePort>< / div> ;
//page1.html
< script src =js / page1.js>< / script>
< div id =content>
< button type =buttononclick =loadPage5（）;>点击< / button>
< / div>
//page1.js
函数loadPage5（）
{
var pagepath =page5.html;
pagesHistory.push（page1.html）;
$（＃pagePort）。load（pagepath，function（）{WL.Logger.info（Page Loaded）;}）;
}
//page5.html
< script src =https://maps.googleapis.com/maps/api/js?v= 3.exp&安培;传感器=假>< /脚本>
< body>
< div id =map-canvas>< / div>
< script src =js / page5.js>< / script>
< script src =js / page1.js>< / script>
< script src =js / initOptions.js>< / script>
< script src =js / main.js>< / script>
< script src =js / messages.js>< / script>
< / body>
//page5.js
函数初始化（）{
var myLatlng1 = new google.maps.LatLng（28.5084805,77.2272778）;
var mapOptions = {
zoom：11，
center：myLatlng1
}
var map = new google.maps.Map（document.getElementById（'map-canvas '），mapOptions）;
var marker1 = new google.maps.Marker（{
position：myLatlng1，
map：map，
}）;
google.maps.event.addDomListener（window，'load'，initialize）;
如何操作？
请参阅以下Worklight 6.1.0.1示例项目，该示例项目演示了在应用程序的另一个页面中导航和加载Google地图的功能。
本示例基于同一个多页样本IBM，您上面的代码片段基于：
在Worklight控制台中提示预览以及iOS模拟器。
I have the following files in Worklight. I want to load the map on the worklight app. It is visible in the "Design" view but neither on simulator nor on emulator. Kindly help.
//index.html
<div id="pagePort"></div>
//page1.html
<script src="js/page1.js"></script>
<div id="content">
<button type="button" onclick="loadPage5();">Click</button>
</div>
//page1.js
function loadPage5()
{
var pagepath="page5.html";
pagesHistory.push("page1.html");
$("#pagePort").load(pagepath,function(){WL.Logger.info("Page Loaded");});
}
//page5.html
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<body>
<div id="map-canvas"></div>
<script src="js/page5.js"></script>
<script src="js/page1.js"></script>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
//page5.js
function initialize() {
var myLatlng1 = new google.maps.LatLng(28.5084805,77.2272778);
var mapOptions = {
zoom: 11,
center: myLatlng1
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
});
google.maps.event.addDomListener(window, 'load', initialize);
How to do it?
Major revision to the answer based on the comments and edits made to the question
See the following Worklight 6.1.0.1 sample project, that demonstrates page navigation and loading of Google Maps in another page in the app.
This sample is based on the same multi-page sample provided by IBM, that your code snippets above are based on:
Tesed in Worklight Console preview as well as iOS Simulator.
这篇关于如何在Worklight应用程序上显示Google Map的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
