Javascript 如何在Worklight应用程序上显示Google地图_Javascript_Google Maps_Ibm Mobilefirst

Javascript 如何在Worklight应用程序上显示Google地图

javascript google-maps ibm-mobilefirst

Javascript 如何在Worklight应用程序上显示Google地图,javascript,google-maps,ibm-mobilefirst,Javascript,Google Maps,Ibm Mobilefirst,我在Worklight中有以下文件。我想在worklight应用程序上加载地图。它在“设计”视图中可见，但在模拟器或模拟器上都不可见。请帮忙 //index.html <div id="pagePort"></div> //page1.html <script src="js/page1.js"></script> <div id="content"> <button type="button" onclick="loadPa

我在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);

//index.html
//页面1.html
点击
//第1.js页
函数loadPage5（）
{
var pagepath=“page5.html”；
pagesHistory.push（“page1.html”）；
$（“#pagePort”）.load（pagepath，function（）{WL.Logger.info（“pageload”）；}）；
}
//页面5.html
//第5.js页
函数初始化（）{
var mylatng1=新的google.maps.LatLng（28.5084805,77.2272778）；
变量映射选项={
缩放：11，
中心：myLatlng1
}
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
var marker1=新的google.maps.Marker({
位置：myLatlng1，
地图：地图，
});
google.maps.event.addDomListener（窗口“加载”，初始化）；

如何操作？

最好将

Javascript

与

index.html

文件分开，然后按照以下步骤操作

您只需在

onchange

事件上传递

值
<select onchange="initialize(" + this.value + ")">

根据对问题的评论和编辑对答案进行了重大修改
请参阅以下Worklight 6.1.0.1示例项目，该项目演示了页面导航和在应用程序的另一个页面中加载Google地图
此示例基于IBM提供的相同多页示例，上面的代码段基于此示例：



在Worklight控制台预览和iOS模拟器中测试。当我移动到下一页时，地图会显示出来，唯一的问题是如何将“值”居中从第一页选择。同样，您的HTML可以工作，但您的Worklight应用程序无法工作。如果您尝试调用适配器、使用Cordova或任何Worklight API，则无法工作。首先修复此问题，然后担心将mapI居中更改了编码，而我没有使用任何JavaScript库（JQuery或Dojo）.我在Worklight上工作，没有任何库。地图正在“设计”中显示查看，但不是在模拟器上，也不是在模拟器上。请帮助。我不是说过会发生这种情况吗？如果你像在代码片段中那样远离主HTML，Worklight framework将丢失，因此它将失败。请阅读文档，让你的应用程序遵循Worklight指南中的说明，然后再担心你的地图。如果你想查看，请r在帮助中，提供整个Worklight项目。这是我编写代码的方式：在第1页的index.html上单击page5.html，与上面在page1.js函数loadPage5（）上给出的映射代码相同。{var pagepath=“page5.html”；pagesHistory.push（“page1.html”）；$（“#pagePort”）.load（pagepath，function（）{WL.Logger.info（“PageLoaded”）}）; }
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;
    }
}