2016-09-25 7 views
1

Ich baue eine AngularJS-App und bin verwirrt über den Dienst $ stateParams. Ich versuche, die Variable "center" von Google Maps als Lat- und lon-Werte in der URL zu definieren.

.config(function ($stateProvider) { 
     $stateProvider.state('location', { 
      url: '/:lat/:lon', 
      templateUrl: 'index.html', 
      controller: 'MapsCtrl', 
      resolve: { 
       resolveMap: function (MapService, $stateParams) { 
        return MapService.getData($stateParams.lat, $stateParams.lon, $stateParams.radius); 
       } 
      } 
     }); 

    }) 

Und hier ist der Beginn meines Controller, bis zu dem ich Zentrum definieren:

Hier mein .config ist

.controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams", 
    function ($scope, $log, GoogleMapApi, $interval, $state, $stateParams, $http) { 
     $log.currentLevel = $log.LEVELS.debug; 
     var center = { latitude: $stateParams.lat, longitude: $stateParams.lon }; 

ich die Störung erhalten: ‚Winkel google -maps: konnte keine gültige center-Eigenschaft finden '.

ist hier ein JS Fiddle, aber es zeigt keine Ausgabe (wahrscheinlich wegen der Fehler oben): https://jsfiddle.net/8mtge09w/

Antwort

0

Das Problem ist, weil Sie versuchen, die Variablen zu binden, bevor sie gesetzt sind. Sie müssen sicherstellen, dass alle Google-Map-Direktiven zuerst gültig sind. Sie können Ihre Richtungselemente ui-gmap-google-map mit ng-if umhüllen, um sicherzustellen, dass Ihre Karteneigenschaften bereit sind.

Ich glaube, Sie

ng-if="map.center !== undefined" 

sicher sein können. Im Grunde rendern Sie Ihre Elemente erst, wenn gültige Eigenschaften gebunden wurden. Sie können auch Standardwerte festlegen und das ng-if vermeiden.

Weitere Details finden Sie unter this github issue.

+0

Arch Dank, dass es behoben! aber jetzt bekomme ich die Warnung Warnung von Google Maps API: NoApiKeys und nichts wird auf der Seite geladen: http://alainwebdesign.ca/newPL/. Aber das war vorher kein Problem, und der Administrator des Repos, von dem ich diesen Code bekommen habe, sagte, dass Sie keine API-Schlüssel benötigen werden ... eine Ahnung von dem, was vor sich geht? –

+0

Klingt, als wären sie entweder falsch oder die Dinge haben sich geändert und Sie benötigen eine Google Maps-API. Kein Grund zur Sorge, du kannst einen kostenlos bekommen. –

+0

Ja, ich habe es schon einmal gemacht, aber ich bin mir nicht sicher, wo ich den Schlüssel für diese App ablegen soll. Wäre es nur in index.html vor dem schließenden Body-Tag? –

0

Sie sollten Breiten- und Längengrad überschreiten, wenn Sie die Ansicht ändern.

$tate.go(stateName, {}, {latitude: value, longitude: value}) 

Wenn Sie einen Status definieren, sollten Sie zusätzlich die Parameter mit den Standardwerten festlegen.

.state(
    ..... 
    params: { 
      latitude: defaultValue, 
      longitude: defaultValue 
    } 
) 
Verwandte Themen