How to display a Google Map on Worklight App

2019-01-27 11:44发布

站内问答 / JavaScript
803 2 4

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?

2条回答
贼婆χ
2楼-- · 2019-01-27 12:25

Better separate the Javascript from the index.html file and then follow the below steps.

You can simply pass the value on onchange event like 

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

Then 

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;
    }
}
查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
3楼-- · 2019-01-27 12:27

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)