Je travaille sur ce projet google maps mais je n'arrive pas à faire fonctionner le json

angular
.module('angular-google-maps', ['uiGmapgoogle-maps'])
.controller('mainController', controller);

function controller ($scope, $http, $filter) {
   $http.get('/data/markers.json').success(function(data) {
     $scope.markers = data;
   });

   $scope.map = {
      center: {
        latitude: 52.339287,
        longitude: 4.925805
      },
      zoom: 8,
      markers: $scope.markers
   };

 $scope.options = {};

};

Si je comprends bien, je peux simplement obtenir les données en utilisant $ scope.markers, n'est-ce pas?

0
meiwaku 8 août 2016 à 15:28

4 réponses

Meilleure réponse

Malheureusement pas. Lorsque vous affectez $scope.markers = data;, vous modifiez l'objet auquel la variable fait référence, mais $scope.map.makers fait toujours référence à l'ancienne valeur (qui est undefined).

Voici deux des moyens les plus simples de surmonter cela:

1) Référencez directement la variable:

$http.get('/data/markers.json').success(function(data) {
   $scope.map.markers = data;
   $scope.markers = data;
 });

2) Avec une montre:

$scope.markers = null;
$http.get('/data/markers.json').success(function(data) {
   $scope.markers = data;
 });

// This is fired whenever makers is changed
$scope.$watch('makers', function(value) { 
    $scope.map.markers = value; 
});
0
Nicholas Robinson 8 août 2016 à 12:38

Vous n'obteniez pas de données dans $ scope.map.markers car la valeur des données de http est asynchrone et $ scope.markers n'est pas initialisée

ESSAYER:

 angular
    .module('angular-google-maps', ['uiGmapgoogle-maps'])
    .controller('mainController', controller);

function controller ($scope, $http, $filter) {
   $http.get('/data/markers.json').success(function(data) {
     $scope.markers = data;

   $scope.map = {
      center: {
        latitude: 52.339287,
        longitude: 4.925805
      },
      zoom: 8,
      markers: $scope.markers
   };

 $scope.options = {};
   });


};
0
shan kulkarni 8 août 2016 à 12:33

$ scope.markers = data; appelle après une demande asynchrone, donc vos marqueurs: $ scope.markers appellent undefined $ scope.markers

0
Andrew Paramoshkin 8 août 2016 à 12:32

Vous devez utiliser la méthode then et modifier l'objet map dans le rappel:

 $http.get('/data/markers.json').then(function(data) {
      $scope.markers = data;
      $scope.map.markers = data;
 });
0
Olivier Boissé 8 août 2016 à 12:32