谷歌地图无法在 iPhone/iPad worklight 6.2 应用程序上运行
Posted
技术标签:
【中文标题】谷歌地图无法在 iPhone/iPad worklight 6.2 应用程序上运行【英文标题】：Google Maps not working on iPhone/iPad worklight 6.2 app 【发布时间】：2014-11-17 02:19:06 【问题描述】：我正在为我的组织开发一个应用程序，该应用程序需要在地图上显示其办公位置，当用户单击链接时，应用程序将在浏览器上打开谷歌地图并显示用户当前位置和所选办公标记之间的路线。这在 android 应用程序中运行良好，但不适用于 iPhone/iPad 应用程序。我正在使用以下代码：
我已经在 index.html 文件中声明了 google api 脚本
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
下面是 location.html 文件的代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
</head>
<body style="display: none; background-color: silver; color: green; font-size: small;">
<div data-role="main" class="ui-content">
<div data-role="content" id="contentMap">
<div id="map_canvas" style="position: absolute !important; top: 10px !important; right: 0; bottom: 5px !important; left: 0 !important;"></div>
</div>
</div>
<script src="js/location.js"></script>
</body>
</html>
下面是 location.js 文件的代码：
/* javascript content from js/location.js in folder common */
function OfficeLocation(latitude,longitude,name,address)
this.latitude = latitude;
this.longitude = longitude;
this.name = name;
this.address = address;
var officeLocationArray = [
new OfficeLocation(32.3947198, -90.1457959, "office location 1", "office location 1"),
new OfficeLocation(31.7138728, -89.1492813, "office location 1", "office location 1"),
new OfficeLocation(32.2777552, -90.1223944, 'office location 1', 'office location 1')
];
// would be used as users current location
var usersLat;
var usersLng;
var youAreHereMarkers; //markers to represent current user location ( blue marker is used). can replace with any image or gifs ( like blue dot gifs)
var map; //
var mapURL; //users location and destination selected by user are stored in this variablse in order to use it to open google map in new browser with route visible
var currentPosition; // will store lat/lng location for google map api.
var infowindow; //displays information about the location when user clicks marker on map
/**
* everthing happens here
*
* on success : getuser location,get new map , add user markers, add win job markers , add marker listeners that lets you open original google map with direction
* on failure: get new map, add all winjob marker
*/
$("#divLocation").on("pageshow", function(event, ui)
alert("map initiliaziation started");
getUsersCurrentLocationAndPopulateMap();
);
/**
*
*/
function getUsersCurrentLocationAndPopulateMap()
var options =
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
;
navigator.geolocation.getCurrentPosition(locationFound, locationNotFound, options);
/**
* creates new map, and adds all marker related information
* @param pos
*/
function locationFound(pos)
try
var coords = pos.coords;
usersLat = coords.latitude;//pos.coords.latitude;
usersLng = coords.longitude;//pos.coords.longitude;
getNewMap();
addUsersLocationMarker();
addAllMarkers();
catch (e)
alert(e.message);
/**
* user location is not determined.
* possible gps sensor problem
* @param err
*/
function locationNotFound(err)
showAlert("Unable to determine your location.");
getNewMap();
addAllMarkers();
alert('ERROR(' + err.code + '): ' + err.message);
/**
* new map is created
*/
function getNewMap()
try
var zoomlevel = 7;
var usersLocation = new google.maps.LatLng(usersLat, usersLng);
map = new google.maps.Map(document.getElementById('map_canvas'),
zoom : zoomlevel,
center : usersLocation,
mapTypeId : google.maps.MapTypeId.ROADMAP
);
catch(e)
alert(e.message);
/**
* place users locatin markers on map and also all win job locations markers
* based on array provided
*/
function addUsersLocationMarker()
try
var blueMarker = new google.maps.MarkerImage(
'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
new google.maps.Size(37, 34), new google.maps.Point(0, 0),
new google.maps.Point(0, 19));
//placing users location map
//http://maps.google.com/mapfiles/ms/icons/blue-dot.png
youAreHereMarkers = new google.maps.Marker(
position : new google.maps.LatLng(usersLat, usersLng),
map : map,
animation : google.maps.Animation.BOUNCE,
title : "You are Here",
icon : blueMarker//'images/here.png'
);
catch (e)
alert(e.message);
/**
* reads all the marker informatin from officeLocationArray and place it on the map as clickable markers
*/
function addAllMarkers()
//clickable region
var shape =
coord : [ 1, 1, 1, 20, 18, 20, 18, 1 ],
type : 'poly'
;
// populalte markers on all WIN Job Center location
var numberOfLocations = officeLocationArray.length;
for (var i = 0; i < numberOfLocations; i++)
var ofcLocation = officeLocationArray[i];
var flag = new google.maps.MarkerImage(
'http://googlemaps.googlermania.com/google_maps_api_v3/en/Google_Maps_Marker.png',
new google.maps.Size(37, 34), new google.maps.Point(0, 0),
new google.maps.Point(0, 19));
var myLatLng = new google.maps.LatLng(parseFloat(ofcLocation.latitude), parseFloat(ofcLocation.longitude));
var marker = new google.maps.Marker(
position : myLatLng,
map : map,
icon : flag,
shape : shape,
title : ofcLocation.name + "\n" + ofcLocation.address
);
// listens if user clicks on marker to display infowindow, and eventually driving to google map in new browser
google.maps.event.addListener(marker,'click',function()
try
if(infowindow)
infowindow.close();
map.setZoom(8);
map.setCenter(marker.position);
var destinationAddress = this.getTitle().split("\n");
mapURL = "http://www.google.com/maps/dir/'"+ usersLat + "," + usersLng + "'/'"+ destinationAddress[0]+","+ destinationAddress[1] + "'";
var contentString=destinationAddress[0]+ /*"<br />"+ destinationAddress[1]+*/ "<br/><div><a href='#' onClick='openGoogMap()' > Go to this location </a></div>";
infowindow = new google.maps.InfoWindow(
maxWidth: 200,
content : "<div style='overflow:hidden;line-height:1.35;min-width:200px;'>"+contentString+"</div>"
);
infowindow.open(map, this);
// showAlert(openMapString);
catch (e)
alert(e.message);
);
/**
* opens google map in a browser with information appended in mapURL
*/
function openGoogMap()
WL.App.openURL(mapURL);
感谢任何帮助。
更新
工作灯版本：6.2.0.0
Xcode 版本：6
【问题讨论】：
如果你说“浏览器”，为什么是所有的代码？您要打开操作系统的外部浏览器应用程序还是在您的应用程序中显示地图？ 看起来您遇到了与此问题link 中描述的相同的问题。将您的 Google 地图 API 密钥添加到 JS src 链接。#divLocation 页面在哪里？用 id divLocation 将 .ui-content 包装在 data-role="page" 中并修改您的 JS $(document).on("pageshow", "#divLocation", function () /* init map */ );
@IdanAdar 我想在应用程序内打开地图，使用时点击特定标记，然后我将用户重定向到操作系统外部浏览器应用程序。
@PrerakTiwari 我刚刚运行了您的代码，我能够看到您在地图上放置的 3 个“2 in Jackson, MS and 1 in Laurel, MS”标记。我正在为 iPad Air ios 8.1 使用 iOS 模拟器。我发现你的 location.html 文件中的 html 和 body 元素的高度没有设置，至少在你发布的代码中，所以我将它设置为 100%，我能够看到带有标记的地图.
【参考方案1】：
好的。得到了答案。由于我在 XCode 6 中构建我的应用程序并使用 worklight 版本 6.2.0.0，这就是为什么这段代码会产生问题。您可以从IBM Website 阅读有关该问题的信息。要解决此问题，请下载以下fix pack，它将您的工作灯版本更新到 6.2.0.1。之后，您必须在 pathToYourProject\YourProject\apps\yourAppName\iphone\native\yourAppName-Info.plist 文件中添加以下条目：
<key>NSLocationAlwaysUsageDescription</key>
<string>Permissions Message for App even when not in use</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Permissions Message for App when in use</string>
构建并重新部署您的应用，它现在应该可以正常工作了。
【讨论】：
以上是关于谷歌地图无法在 iPhone/iPad worklight 6.2 应用程序上运行的主要内容，如果未能解决你的问题，请参考以下文章
为啥 iPhone/iPad 上的浏览器无法下载/预览 docx 文件？
LocalStorage 在带有 os 10 的 iphone/ipad 中无法正常工作
无法单击标记 - 谷歌地图集群Android，无法在谷歌地图中显示信息窗口