Угловой пользовательский интерфейс не обновляется для изменений области

Question

Я пытаюсь обновить Angular ui-map при изменении области действия. Я добавил $watch, и я вижу изменение области в консоли, но карта не обновляется с изменением широты и долготы. Это то, что у меня есть:

 $scope.mapOptions = { 
        zoom: 4, 
        center: new google.maps.LatLng(-25.363882,131.044922), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      var updateCenter = function() { 
        $scope.mapOptions = { 
         zoom: 11, 
         center: new google.maps.LatLng($scope.fromLat, $scope.fromLng), 
        }; 
        console.log($scope.mapOptions); 
       } 
       $scope.$watch('fromLat', updateCenter); 
       $scope.$watch('fromLng', updateCenter); 

Где $scope.fromLat и $scope.fromLng являются масштабы изменений, которые я смотрю. Когда я регистрирую эти области в консоли, я вижу, что области обновляются. Но карта все еще находится в исходном состоянии.

Answer 1

Хорошо, это то, что я сделал для решения этой проблемы. Я сделал 2 изменения:

1) Используется setCentre() в контроллере:

В методе updateCenter(), вместо обновления $scope.mapOptions я использовал setCenter() непосредственно изменить центр карты.

var updateCenter = function() { 
    $scope.myMap.setCenter(new google.maps.LatLng($scope.fromLat, $scope.fromLng)); 
} 

Здесь myMap является объем добавлен в ui-map так:

div ui-map="myMap" ui-options="mapOptions" class="google-map"></div> 

2) нг-изменение View или $ смотреть:

Во-вторых, я добавил $watch для мгновенно обновляя карту. Есть 2 способа:

• Я могу добавить ng-change атрибут входной области, которая вызывает вышеприведенную функцию, когда широта и долгота прицелы изменяются. Таким образом, изменение карты действует немедленно. <input id="fromLat" type="text" ng-model="fromLat" ng-change="updateMap()" name="fromLat" />

• Или добавить $watch в контроллере: $scope.$watch('fromLat', updateCenter);