0

我正在将角度图（ngmap）运行到模态对话中。它运行良好，但中心显示在模态窗口的左上角（未居中）。

我使用以下方式启动模式：

<a class="button-circle icon ion-ios-navigate-outline padding" ng-click="modal.show()"></a>

模态在 html 中（作为脚本）：

<script id="templates/modal.html" type="text/ng-template">
   <ion-modal-view style="width: 100%;">
   <ion-header-bar class="bar bar-header bar-positive">
      <h1 class="title">¿Dónde está?</h1>
   </ion-header-bar>
   <ion-content class="padding" scroll="false" data-tap-disabled="true">
      <map zoom="17" center="{{data.latitude}}, {{data.longitude}}"  style="width:100%; height: 90%;">
      <marker position="{{data.latitude}}, {{data.longitude}}"></marker>
      </map>
      <button class="button button-full button-positive" ng-click="modal.hide()">Close</button>
       </ion-content>
   </ion-modal-view>
</script>

最后，这是控制器：

.controller('MapCtrl', ['$scope', '$http', '$state', '$ionicModal', function($scope, $http, $state, $ionicModal){
    $http.get('app-data/cities.json')
    .success(function(data){
        $scope.data = data.places[$state.params.id];

    $ionicModal.fromTemplateUrl('templates/modal.html', {
        scope: $scope,
        animation: 'slide-in-up'
      }).then(function(modal) {
        $scope.modal = modal     
      })  

      $scope.openModal = function() {
        $scope.modal.show();
      };

      $scope.closeModal = function() {
        $scope.modal.hide();
      };

      $scope.$on('$destroy', function() {
        $scope.modal.remove();
      });

        });
}])

有什么建议么？谢谢 ;-）

4

1 回答 1

0

尝试分析这个正在使用丑陋的“解决方法”（$timeout）的 Plunker。

http://plnkr.co/edit/4cgdHeiBYWlxKEuoGsl7?p=preview

在 $http 成功处理程序上，我尝试使用 NgMap.getMap().then() 来直接访问地图对象并手动设置中心。然后我无法理解为什么它不能正确地居中地图，但它需要手动触发“center_changed”然后再次 setCenter...

$http.get('cities.json') // $http.get('app-data/cities.json')
.success(function(data) {
  //$scope.data = data.places; //data.places[$state.params.id];
  $scope.zoom = 6;

  NgMap.getMap().then(function(map) {
    var cx = map.getCenter();
    var txt = "center is: lat="+cx.lat()+", lng="+cx.lng();

    map.setCenter({lat: data.places.latitude, lng: data.places.longitude});
    $scope.data = data.places;

    console.log(txt);
    $scope.trace = txt;
    $scope.map = map;
    google.maps.event.trigger(map, "center_changed");

    $timeout(function() {
      $scope.center();
    }, 2000);

  });

  ...

我认为有一些离子模态 Css 会干扰谷歌地图。事实上，它在一个简单的 ionic 视图中运行良好，而它在模态中具有这种烦人的行为。

于 2015-12-21T10:07:28.913 回答