0

Tengo un problema y es que no se como usar una variable de scope y mostrarla en el mapa, no me reconoce la ubicacion

/**
 * Created by gamba on 20/10/2016.
 */
var app = angular.module("mapas",[]);

app.controller("myctrl",function ($scope,$http) {
    //CONEXION
    $scope.coordenadas=[];
    var url = "http://192.168.137.11:8000/conductores/";
    $http({
        method: 'GET',
        url: url
    }).then (function successCallback(data) {
        $scope.coordenadas=data;
    },function errorCallback(err) {
        console.log("No funciona la conexion");
    });
    //GOOGLE MAPS API CODE
    var cities = [
        $scope.coordenadas[1].ubicacion,
        $scope.coordenadas[2].ubicacion
    ];
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $scope.markers = [];

    var infoWindow = new google.maps.InfoWindow();

    var createMarker = function (info){

        var marker = new google.maps.Marker({
            map: $scope.map,
            position: new google.maps.LatLng(info.lat, info.long),
            title: info.city
        });
        marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';

        google.maps.event.addListener(marker, 'click', function(){
            infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
            infoWindow.open($scope.map, marker);
        });

        $scope.markers.push(marker);

    }

    for (i = 0; i < cities.length; i++){
        createMarker(cities[i]);
    }

    $scope.openInfoWindow = function(e, selectedMarker) {
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    }
});

me da error a la hora de hacer el $scope.coordenadas[1].ubicacion .

Lo que entra como coordenada.ubicacion obtenida es "SRID=4326;POINT (-77.05810546875 -12.093200683594)" por ejemplo.

1 respuesta 1

0

La llamada $http es asincrona. Tienes que ejecutar tu codigo desde el successCallback que es donde estas asignando los datos del GET :

$scope.coordenadas=data;

Asi:

.then (function successCallback(data) {
    $scope.coordenadas=data;
    var cities = [
        $scope.coordenadas[1].ubicacion,
        $scope.coordenadas[2].ubicacion
    ];

    // demas codigo
},
5
  • me sale angular.min.js:122 ReferenceError: cities is not defined Commented el 7 dic. 2016 a las 0:18
  • eso es por que estas intentanto usar cities fuera de la funcion successCallback
    – Ziul
    Commented el 7 dic. 2016 a las 0:20
  • esta dentro del success callback }).then (function successCallback(data) { $scope.coordenadas=data; var cities = [ $scope.coordenadas[1].ubicacion, $scope.coordenadas[2].ubicacion ]; },function errorCallback(err) { console.log("No funciona la conexion"); }); Commented el 7 dic. 2016 a las 0:24
  • Ahi lo defines, pero lo utilizas fuera de la funcion successCallback, aqui mira: for (i = 0; i < cities.length; i++){. Esta linea te esta marcando ese error.
    – Ziul
    Commented el 7 dic. 2016 a las 0:27
  • @Ziul, ¿podrias editar tu respuesta incluyendo el script completo? De esa forma quedaria claro cual podria ser el resultado final.
    – Marcos
    Commented el 7 dic. 2016 a las 11:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.