个人中心
gpt4 book ai didi

javascript - Google map 无法在 iPhone/iPad worklight 6.2 应用程序上运行

转载 作者：行者123 更新时间：2023-12-03 11:24:52 24 4
gpt4 key购买 nike

我正在为我的组织开发一个应用程序，需要在 map 上显示其办公室位置，当用户单击链接时，应用程序将在浏览器上打开谷歌地图并显示用户当前位置和所选办公室标记之间的路线。这在 Android 应用程序中运行良好，但不适用于 iPhone/iPad 应用程序。我正在使用下面的代码:

我已经在index.html文件中声明了google api脚本

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;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

最佳答案

好的。得到答案了。由于我是在 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>

构建并重新部署您的应用程序，它现在应该可以正常工作。

关于javascript - Google map 无法在 iPhone/iPad worklight 6.2 应用程序上运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26964543/

24 4 0
文章推荐： javascript - 如何使用 Javascript 重定向到默认/感谢
文章推荐： sql-server - 如何选择列和聚合函数？
文章推荐： angularjs - 为什么 Angular JS form.$pristine 不会随着直接 JS 操作而改变
文章推荐： javascript - Angular JS 待办事项列表未显示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com