NG-MAP（离子）运行，但中心在左上角成模 [英] ng-map (ionic) running but center is at top-left into modal

问题描述

I'm运行的角映射（ngmap）转换成一个模态对话。运行汇入作业精细，但中心显示在左上角的模式窗口（不居中）。

I´m running an angular map (ngmap) into a modal dialogue. It´s run fine, but center is showing at the top-left from modal window (not centered).

我启动模式有：

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

模态是到HTML（如脚本）：

The modal is into the html (as script):

<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>

最后，这是控制器：

Finally, this is the controller:

.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();
      });

        });
}])

有什么建议？感谢; - ）

Any suggestions? Thanks ;-)

推荐答案

试着分析一下这个Plunker这正与一个丑陋的解决办法（$超时）。

Try to analyze this Plunker which is working with an ugly "workaround" ($timeout).

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

在$ HTTP成功处理程序我试图用NgMap.getMap（）。然后，（），以获得直接映射对象，并手动设置中心。然后，我不能uderstand为什么它不正确地图中心，但它需要触发手动center_changed的，然后再setCenter ...

On $http success handler I tried to use NgMap.getMap().then() in order to access directly map object and to set center manually. Then I can't uderstand why it doesn't center properly the map, but it requires to trigger "center_changed" manually and then setCenter again...

$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。事实上，它工作得很好在一个简单的离子来看，虽然它有一个模式里面这恼人的行为。

I think there's some ionic modal Css which interferes with Google maps. In fact it works quite well in a simple ionic view, while it has this annoying behavior inside a modal.

这篇关于NG-MAP（离子）运行，但中心在左上角成模的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！