0
Ich versuche, eine mobile Anwendung mit Ionic Framework zu entwickeln. Es funktioniert in der Webanwendung, aber wenn es auf dem Smartphone installiert ist, funktioniert es nicht mehr.zeigt nicht Google Maps im Smartphone und keine Verbindung mit Webservice mit ionischen Rahmen
Code index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" >
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngstorage/ngStorage.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyAXp19GmxccWT5A5vVgtQK5NHCaZDb_W0I">
</script>
</head>
<body ng-app="phonegp">
<div class="tabs tabs-icon-top">
<a class="tab-item" ui-sref="actualite">
<i class="icon ion-document-text"></i>
Actualité
</a>
<a class="tab-item" ui-sref="contact">
<i class="icon ion-star"></i>
Contact
</a>
<a class="tab-item" ui-sref="geo">
<i class="icon ion-location"></i>
Géo Localisation
</a>
<a class="tab-item" ui-sref="config">
<i class="icon ion-gear-b"></i>
Settings
</a>
</div>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-energized">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons>
<button menu-toggle="left" class="button button-icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-item menu-close ui-sref="actualite">Actualite</ion-item>
<ion-item menu-close ui-sref="contact">Contact</ion-item>
<ion-item menu-close ui-sref="geo">Géo Localisation</ion-item>
<ion-item menu-close ui-sref="config">Settings</ion-item>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
Code app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
app = angular.module('phonegp', ['ionic','ngCordova','ngStorage'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state("actualite",{
url : "/actualite",
templateUrl : "templates/actualite.html",
controller:"getactualites"
});
$stateProvider.state("infoActualite",{
url : "/infoAlite",
templateUrl : "templates/infoActualite.html",
controller:"infoActualiteCtrl"
});
$stateProvider.state("contact",{
url : "/contact",
templateUrl : "templates/contact.html"
});
$stateProvider.state("geo",{
url : "/geo",
templateUrl : "templates/geo.html",
controller:"GeoCtrl"
});
$stateProvider.state("config",{
url : "/config",
templateUrl : "templates/config.html"
});
//pour afficher page index
$urlRouterProvider.otherwise("actualite");
})
app.factory("StorageService",function($localStorage){
$localStorage = $localStorage.$default({
trajet: []
});
return {
savePosition:function(pos) {
$localStorage.trajet.push(pos);
},
getAllPositions:function(){
return $localStorage.trajet;
}
}
});
app.controller("getactualites",function($scope,$http,$stateParams){
$http.get('http://192.168.1.4/pfe/web/app_dev.php/api/users')
.then(function successCallback(response) {
$scope.data = response;
}, function errorCallback(response) {
console.log(response);
alert('error');
})
});
app.controller("infoActualiteCtrl",function($scope,$http){
});
app.controller("GeoCtrl",function($scope,$cordovaGeolocation,StorageService){
var counter;
var currentLatitude;
var currentLongitude;
var markers = [];
var options = {
timeout:10000,
enableHighAccuracy:true
};
$cordovaGeolocation.getCurrentPosition(options)
.then(function(position){
currentLatitude = position.coords.latitude;
currentLongitude = position.longitude;
$scope.position = position;
var latLng= new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
theMap = new google.maps.Map(document.getElementById('map'),mapOptions);
$scope.map=theMap;
$scope.newMarker(position,theMap);
$scope.watchPosition(theMap);
},
function(err) { console.log(err); }
);
$scope.watchPosition=function(theMap){
var watchOptions = {
timeout: 2000,
enableHighAccuracy: true
};
watch = $cordovaGeolocation.watchPosition(watchOptions);
watch.then(
null,
function(err) {
//console.log(err);
},
function(position){
//console.log(position);
if ((position.coords.longitude!=currentLongitude) &&
(position.coords.latitude!=currentLatitude)){
$scope.position = position;
$scope.newMarker(position,theMap);
}
}
);
}
$scope.newMarker=function(position,theMap){
latLng= new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude
);
marker = new google.maps.Marker({
position:latLng,
title: "Position"+(++counter),
label: "H"
});
marker.setMap(theMap);
markers.push(marker);
StorageService.savePosition({
lat:position.coords.latitude,
lng: position.coords.longitude
});
}
$scope.showMarker=function(p){
latLng = new google.maps.LatLng(p.lat, p.lng);
marker = new google.maps.Marker({
position:latLng,
label: "H"
});
marker.setMap($scope.map);
markers.push(marker);
}
$scope.hideMarkers=function(){
markers.forEach(function(m){
m.setMap(null);
})
}
$scope.showTrajet= function() {
traj =StorageService.getAllPositions();
traj.forEach(function(p){
$scope.showMarker(p);
});
}
});
Code style.css
.contact h5 {
font-weight: bold;
color:#444;
margin-left: 30px;
padding: 8px;
}
.image img {
margin:30px 0 0 40px;
border-radius: 50%;
width:150px;
height:150px;
padding: 10px;
}
.scroll {
height: 100%;
}
#map {
width:100%; height: 100%;
}
.icon {
text-align: center;
padding: 10px;
}
.icon img {
margin-right: 10px;
}
dies Screenshot von problemes
