javascript - studio - ionic google maps custom marker

Angular-Google-Map: Cómo cargar el mapa después de los datos de posición cargados(Lat, Lng)?

Question

Obtuve el error: ''angular-google-maps: no se pudo encontrar una propiedad de centro válida''. cuando veo $ mi ubicaciónData cargada desde php backend y exec initialize function.

HTML:

<div ng-init="locationData = ''<?=htmlspecialchars($data)?>''">
    <google-map center="map.center" zoom="map.zoom" options="map.options"></google-map>
</div>

Controlador angular:

app.controller(''MapCtrl'', [''$scope'', function ($scope) {
    ''use strict'';

    $scope.$watch(''locationData'', function() {
        var location = JSON.parse($scope.locationData);
        $scope.location = {
            lng : location.longitude,
            lat : location.latitude
        initialize();
    });

    function initialize() {
        var mapOptions = {
            panControl    : true,
            zoomControl   : true,
            scaleControl  : true,
            mapTypeControl: true,
            mapTypeId     : google.maps.MapTypeId.ROADMAP
        };

        $scope.map = {
            center: {
                latitude: $scope.location.lat,
                longitude: $scope.location.lng
            },
            zoom: 13,
            options: mapOptions,
        };
    }
}]);

Y, muevo la configuración de $ scope.map a la parte superior del bloque del controlador y establezco el valor constante para mapear

center: {
    latitude: 0,
    longitude: 0
},

, mapa muestra correctamente.

Controlador angular:

app.controller(''MapCtrl'', [''$scope'', function ($scope) {
    ''use strict'';

    var mapOptions = {
        panControl    : true,
        zoomControl   : true,
        scaleControl  : true,
        mapTypeControl: true,
        mapTypeId     : google.maps.MapTypeId.ROADMAP
    };

    $scope.map = {
        center: {
            latitude: 0,
            longitude: 0
        },
        zoom: 13,
        options: mapOptions,
    };
}]);

¿Cómo se puede hacer google map directive parse después de los datos cargados y mostrar el mapa correctamente con back-end Lat, Lng de datos?

Answer 1

center se establece como:

        center: {
            latitude: $scope.location.lat,
            longitude: $scope.location.lng
        },

Debería ser como:

        center: new google.maps.LatLng($scope.location.lat, $scope.location.lng),

si lat / lng son números. Si no es así, debes usar parseFloat ().

Answer 2

Sugiero una alternativa, ng-map .

<map center="[<?=$data.latiude?>, <?=$data.longitude?>]" zoom="12" />

Creé esta directiva, así que debería funcionar de esta manera, y creo que esta es la manera AngularJS.

Answer 3

Finalmente, uso ng-if y cambio el valor de map.isReady de false a true después de inicializar el mapa.

<div ng-init="locationData = ''<?=htmlspecialchars($data)?>''">
    <div ng-if="map.isReady">
        <google-map center="map.center" zoom="map.zoom" options="map.options"></google-map>
    </div>
</div>

Funciona.