如何在 Worklight 应用程序上显示 Google 地图
Posted
技术标签:
【中文标题】如何在 Worklight 应用程序上显示 Google 地图【英文标题】：How to display a Google Map on Worklight App 【发布时间】：2014-03-27 10:19:21 【问题描述】：我在 Worklight 中有以下文件。我想在 worklight 应用程序上加载地图。它在“设计”视图中可见，但在模拟器和模拟器上均不可见。请帮忙。
//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);
怎么做？
【问题讨论】：
【参考方案1】：根据对问题的 cmet 和编辑对答案进行重大修订
请参阅以下 Worklight 6.1.0.1 示例项目，该项目演示了页面导航和在应用程序的另一个页面中加载 Google 地图。
此示例基于 IBM 提供的同一个多页示例，您上面的代码 sn-ps 也基于：
Multi-page application with Google Maps在 Worklight 控制台预览版和 ios 模拟器中测试。
【讨论】：
当我移动到下一页时，地图正在显示，唯一的问题是如何“居中”从第一页中选择的“值”。 同样，您的 HTML 可能有效，但您的 Worklight 应用程序不能。如果您尝试调用适配器、使用 Cordova 或任何 Worklight API，它将不起作用。首先解决这个问题，然后担心地图居中 我更改了编码，但我没有使用任何 javascript 库（JQuery 或 Dojo）。我正在开发没有任何库的 Worklight。该地图正在“设计”视图中显示，但既不在模拟器上，也不在模拟器上。请帮忙。 我不是说这会发生吗？如果您像在代码 sn-ps 中那样导航离开主 HTML，Worklight 框架将丢失，因此，它将失败。请阅读文档并让您的应用程序遵循 Worklight 指南所说的内容 - 然后然后担心您的地图。如果您需要进一步的帮助，请提供整个 Worklight 项目。 这就是我完成编码的方式： 在 index.html 在 page1.html on page5.html 上面给出的相同地图代码 on page1.js function loadPage5() var pagepath="page5.html"; pagesHistory.push("page1.html"); $("#pagePort").load(pagepath,function()WL.Logger.info("页面加载");); 【参考方案2】：最好将Javascript 与index.html 文件分开，然后按照以下步骤操作。
您可以简单地将value 传递给onchange 事件，例如
<select onchange="initialize(" + this.value + ")">
然后
function initialize(value) // process the value
var myLatlng1 = new google.maps.LatLng(28.5084805,77.2272778);
var myLatlng2 = new google.maps.LatLng(28.6473116,77.1559846);
var mapOptions =
zoom: 11,
switch(value)
case "south": center: myLatlng1; break;
case "west": center: myLatlng2; break;
【讨论】：
以上是关于如何在 Worklight 应用程序上显示 Google 地图的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Worklight 中使用 cordovaWebview？
IBM Worklight 6.1 - 如何集成 Ionic 框架？
IBM Worklight 6.1 - 禁用焦点上的橙色轮廓突出显示不起作用
如何在worklight的浏览器控制台中显示jsessionid