Angular -google-maps TypeError: $scope.map.control.refresh не является функцией

Я интегрирую angular -google-карты в мобильное приложение cordova. Я хочу обновить карту, используя следующую функцию.

        function refreshMap() {
            $scope.map.control.refresh({
                latitude: $scope.location.T_Lat_Deg_W.value,
                longitude: $scope.location.T_Long_Deg_W.value
            })
        }

Но ошибки учитываются

angular.js: 13540 TypeError: $scope.map.control.refresh не является Функция

at Scope.refreshMap (mapController.js:122)
at fn (eval at <anonymous> (angular.js:1), <anonymous>:4:224)
at expensiveCheckFn (angular.js:15475)
at callback (angular.js:25008)
at Scope.$eval (angular.js:17219)
at Scope.$apply (angular.js:17319)
at HTMLAnchorElement.<anonymous> (angular.js:25013)
at defaultHandlerWrapper (angular.js:3456)
at HTMLAnchorElement.eventHandler (angular.js:3444)

Вот пример JSFiddle для этой проблемы.

Есть ли способ решить эту проблему? Спасибо!

Ответ 1

На самом деле ключом этой проблемы является то, что $scope.map.control.refresh не следует использовать до полной загрузки карты. Если карта изначально скрыта, я вызываю функцию, подобную этой

function refreshMap() {
    //show map action
    $scope.map.showMap = true;
    //refresh map action
    $scope.map.control.refresh({latitude: 48,longitude: 2.3});
}

Функция refreshMap будет вызывать действие шоу-карты и обновлять действие карты одновременно. Это означает, что карта не полностью загружена, когда я вызываю функцию $scope.map.control.refresh. Таким образом, он сообщит TypeError: $scope.map.control.refresh is not a function.

Один из способов - использовать uiGmapIsReady, чтобы определить, готова ли карта к использованию.

function refreshMap() {
    //show map action
    $scope.map.showMap = true;

    //refresh map action
    uiGmapIsReady.promise()
        .then(function (map_instances) {
            $scope.map.control.refresh({latitude: 48,longitude: 2.3});
        });
}

Этот JSFiddle использует uiGmapIsReady для решения этой проблемы.

Второй способ - использовать $timeout для задержки действия обновления.

function refreshMap() {
    //show map action
    $scope.map.showMap = true;

    //delayed refresh map action
    $timeout(function(){
        $scope.map.control.refresh({latitude: 48,longitude: 2.3});
    },3000);
}

Этот JSFiddle использует $timeout для решения этой проблемы.