Web应用程序无法以多设备混合应用程序格式运行

时间：2014-08-22 13:36:14

标签： javascript angularjs ripple visual-studio-cordova

我有这个应用程序完美地作为一个普通的网络应用程序。但是，当我尝试将其置于多设备 - 混合应用程序格式时，它无法正常工作。具体来说，无法正常工作的部分将在应用程序的屏幕截图中突出显示。这是我的完整代码：
JS：

var app = angular.module('app', []);
app.controller('firstCtrl', function($scope, $timeout) {
  var myLat, myLon, locLat, locLon;
  navigator.geolocation.watchPosition(GetLocation);

  $scope.ASiteLocs = [{
    "name": "IL5077 BRUSSELS",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-90.58543899999999,38.955472,0"
    }
  }, {
    "name": "IL5076 KAMPSVILLE",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-90.661923,39.29403,0"
    }
  }, {
    "name": "IL5146 CARROLLTON",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-90.39965700000001,39.309142,0"
    }
  }];
  $scope.SSiteLocs = [{
    "name": "502 Nelson St, Greenville, MS 38701",
    "visibility": "0",
    "description": "502 Nelson St, Greenville, MS 38701",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-91.05636,33.415485,0"
    }
  }, {
    "name": "242 Blackhawk Trace, Galena, IL 61036",
    "visibility": "0",
    "description": "242 Blackhawk Trace, Galena, IL 61036",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-90.319778,42.390862,0"
    }
  }, {
    "name": "3747 Ocean Dr, Vero Beach, FL 32963",
    "visibility": "0",
    "description": "3747 Ocean Dr, Vero Beach, FL 32963",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-80.358248,27.659094,0"
    }
  }];
  $scope.SiteLocs = $scope.SSiteLocs.concat($scope.ASiteLocs);
  $scope.repoSortOrder = "+name";


  function GetLocation(location, myLat, myLon) {
    myLat = location.coords.latitude;
    myLon = location.coords.longitude;
    document.getElementById("lat").innerHTML = myLat;
    document.getElementById("lon").innerHTML = myLon;
    $timeout(function() {
      calculate();
    });

  }

  $scope.getCoordDistance = function(myLat, myLon, locLat, locLon) {
    console.log(myLat.toString(), myLon);
    var lat1 = locLat; //41.887055
    var lon1 = locLon; //-88.469233
    var lat2 = myLat; //41.888668
    var lon2 = myLon; //-87.640371

    var R = 3959;
    var x1 = lat2 - lat1;
    var dLat = x1 * Math.PI / 180;
    var x2 = lon2 - lon1;
    var dLon = x2 * Math.PI / 180;
    a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
      Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
      Math.sin(dLon / 2) * Math.sin(dLon / 2);
    c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c;
    return d;

  };


  angular.forEach($scope.SSiteLocs, function(object) {
    object.carrier = 'Sprint';
  });
  angular.forEach($scope.ASiteLocs, function(object) {
    object.carrier = 'AT&T';
  });

  var calculate = function() {
    angular.forEach($scope.SiteLocs, function(location) {
      var clength = location.Point.coordinates.length;
      if (location.Point.coordinates.substring(clength - 2, clength) === ",0") {
        location.Point.coordinates = location.Point.coordinates.substring(0, clength - 2).split(",");
        Lat = location.Point.coordinates[0];
        Lon = location.Point.coordinates[1];
        Com = ",";
        location.Point.coordinates = Lon.concat(Com, Lat);
        myLat = Number(document.getElementById("lat").innerHTML);
        myLon = Number(document.getElementById("lon").innerHTML);

        locLat = Lon;
        locLon = Lat;
        d = $scope.getCoordDistance(myLat, myLon, locLat, locLon);
        d = d.toFixed(1);
        d = Number(d);
        location.distance = d;
      }

    });
  };
});

HTML：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
    <script data-require="angular.js@*" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="google-maps@1.0.0" data-semver="1.0.0" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
    <script data-require="geo-location-javascript@*" data-semver="0.4.8" src="//cdnjs.cloudflare.com/ajax/libs/geo-location-javascript/0.4.8/geo.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <link href="css/index.css" rel="stylesheet" />
    <script src="scripts/script.js"></script>
    <title>ECC</title>
</head>
<body link="white" vlink="white">
    <center>
        <h1>Site Lookup</h1>
        <div>{{site.carrier}}</div>
        <div ng-controller="firstCtrl">
            <input type="text" ng-model="search" border="1" placeholder="Search Name or Distance" />
            <br><div id="astDiv">Select sort option...</div>
            <select ng-model="repoSortOrder">
                Sort by
                <option value="+name">Name--Alphabetical</option>
                <option value="-name">Name--Backwards Alphabetical</option>
                <option value="-distance">Distance--Descending</option>
                <option value="+distance">Distance--Ascending</option>
            </select>
            <div id="astDiv">*Distances are not exact*</div>
            <table border="1">
                <thead>
                    <tr>
                        <td>Name</td>
                        <td>Distance*</td>
                        <td>Carrier</td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="site in SiteLocs | orderBy:repoSortOrder | filter : search">
                        <td>
                            <a ng-href="http://maps.google.com/?q={{site.Point.coordinates}}">
                                {{site.name}}
                            </a>
                        </td>
                        <td>{{site.distance}} Miles</td>
                        <td>
                            {{site.carrier}}
                        </td>
                    </tr>
                </tbody>
            </table>
            <div id="lat"></div>
            <div id="lon"></div>
        </div>
    </center>
</body>
</html>

CSS：

@font-face {
    font-family: myFirstFont;
    src: url(roboto-light.ttf);
}

html{

  background: url(http://www.pixeden.com/media/k2/galleries/220/006-wood-melamine-subttle-pattern-background-pat.jpg)

}
a {
    text-decoration: none;
}
table{
    color: white;
    font-size:1.25em;
    font-family: 'Droid Serif', serif;
    text-align: left;
    vertical-align: middle;
    width: 100%;
}

input {
    border: 0px solid white; 
    -webkit-box-shadow: 
      inset 0 0 40px  rgba(20,20,20,500),
            0 0 40px rgba(20,20,20,500); 
    -moz-box-shadow: 
      inset 0 0 40px  rgba(20,20,20,500),
            0 0 40px rgba(20,20,20,500); 
    box-shadow: 
      inset 0 0 5px  rgba(0,0,0,10),
            0 0 75px rgba(0,0,0,10); 
    padding: 15px;
    background: rgba(255,255,220,5);
    margin: 0 0 10px 0;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 25px;
  font-family: 'Droid Serif', serif;

}
#astDiv{ color: white;}

h1 {
    color:#ffffff;
    font-family: 'Droid Serif', serif;
}

#latDiv {
    color:#000000;
    font-family: 'Droid Serif', serif;
}
#lonDiv {
    color:#000000;
    font-family: 'Droid Serif', serif;
}

以下是该应用的外观：enter image description here 这就是Multi-Device-Hybrid-Apps中的样子：enter image description here 另一件需要注意的事项是：当用户点击位置名称时，应用程序会运行谷歌地图搜索坐标并为其打开地图。在代码中，地图的坐标会稍微播放，以使其格式正确。在Multi-Device-Hybrid-Apps中，代码似乎不起作用。我认为问题出在calculate()，但我不知道在哪里。我在这里做错了吗？是否需要平台特定代码？非常感谢任何帮助!!

1 个答案:

答案 0 :(得分：0)

您需要允许Chrome使用您计算机的位置来计算和显示距离（英里）。在允许使用计算机的位置后，我能够获得里程值。

enter image description here

应用程序在Ripple上运行

enter image description here

您可以在帖子How to use Google Maps in Cordova app上引用，以便在点击事件中显示Google地图上的特定位置。

您还可以参考博文Loading Google Maps in Cordova the Right Way

相关问题
最新问题