Карты Google не отображаются в Ionic Modal

Question

Карты Google не отображаются в Ionic Modal

0

Я пытаюсь показать карту google в ионном модальном, но она не появляется... но когда я показываю ее на странице, она появляется. Пожалуйста, мне нужна помощь в этом отношении. Очень раздражает. Ниже в моем контроле js и ионном модальном.

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

      $scope.openmapModal = function()
      {
          
         $scope.modal4.show();
      };

      $scope.closemapModal = function() { 
        $scope.modal4.hide();
      };     

 var posOptions = {
            enableHighAccuracy: true,
            timeout: 20000,
            maximumAge: 0
        };
        
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
            var lat  = position.coords.latitude;
            var long = position.coords.longitude;
            console.log(lat); 
            console.log(long); 
            $ionicLoading.hide();
            $scope.openmapModal();    
            //var jus = document.getElementById('map');
//            var map;
            $scope.initMap = function() {
                var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                console.log('entered map');
                var myOptions = {
                    zoom: 16,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                $scope.map = new google.maps.Map(document.getElementById("map"), myOptions);

                var marker = new google.maps.Marker({
                    draggable: true,
                    position: myLatlng,
                    map: $scope.map,
                    title: "Your location"
                });

                google.maps.event.addListener(marker, 'dragend', function (event) {


                    document.getElementById("lat").value = event.latLng.lat();
                    document.getElementById("long").value = event.latLng.lng();
                });
            }
            google.maps.event.addDomListener(window, "load", $scope.initMap());
            
            });

<ion-modal-view >
  <ion-header-bar align-title="center" class="common-header">
    <h1 class="title">Add address</h1>
     <button class="button button-icon icon ion-close" ng-click="modal4.hide();"></button>    
  </ion-header-bar>
  <ion-content>
    <div id="map" data-tap-disabled="true"></div>
  </ion-content>
  <ion-footer-bar class="bar-dark">
      <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
  </ion-footer-bar>
</ion-modal-view>

talentedandrew 01 июнь 2016, в 13:03

Источник

0

Вы определили $ ionicModel в controller.js как .controller ('AppCtrl', function ($ ionicModal) {// ваш код}
Atula 01 июнь 2016, в 10:46
0

да!! Я определил это .... У меня уже есть 2 еще модалы в том же представлении все работает нормально
talentedandrew 01 июнь 2016, в 10:47
0

какая твоя линия № 24? и откуда начинается $ scope.initMap ()?
Atula 01 июнь 2016, в 10:58
0

@ Атула на линии 24 м, используя cordovageolocation, чтобы получить лат и ланг, а затем передать его на карту Google, чтобы показать его на карте. Он работает нормально в представлении, но не работает в модальном
talentedandrew 01 июнь 2016, в 11:03
0

трудно понять. Есть ли $ scope.openmapModal (); работать должным образом ?
Atula 01 июнь 2016, в 11:06
0

да, это открывает модальное ..
talentedandrew 01 июнь 2016, в 11:07
0

Давайте продолжим эту дискуссию в чате .
Atula 01 июнь 2016, в 11:07
0

@ Атула хорошо, давайте присоединиться там
talentedandrew 01 июнь 2016, в 11:11
0

В открытом модале вы случайно не видели серую область, где должна была быть карта? Какая у вас map div css? Можете ли вы показать реализацию функции modal4.show() ?
Matej P. 01 июнь 2016, в 11:20
0

нет серой области, только пустая область ... и правильная карта CSS есть, потому что она работала нормально в других видах .. просто не работает в модальном
talentedandrew 01 июнь 2016, в 11:26
0

@MatejP. Можете ли вы сказать мне, как получить доступ к элементу, который находится внутри модального из контроллера, потому что document.getElementById возвращает нуль ..
talentedandrew 01 июнь 2016, в 12:11

Показать ещё 9 комментариев

Теги:

javascript

ionic-framework

angularjs

google-maps

1 ответ

Ещё вопросы

Вы определили $ ionicModel в controller.js как .controller ('AppCtrl', function ($ ionicModal) {// ваш код}
да!! Я определил это .... У меня уже есть 2 еще модалы в том же представлении все работает нормально
какая твоя линия № 24? и откуда начинается $ scope.initMap ()?
@ Атула на линии 24 м, используя cordovageolocation, чтобы получить лат и ланг, а затем передать его на карту Google, чтобы показать его на карте. Он работает нормально в представлении, но не работает в модальном
трудно понять. Есть ли $ scope.openmapModal (); работать должным образом ?
Давайте продолжим эту дискуссию в чате .
@ Атула хорошо, давайте присоединиться там
В открытом модале вы случайно не видели серую область, где должна была быть карта? Какая у вас map div css? Можете ли вы показать реализацию функции modal4.show() ?
нет серой области, только пустая область ... и правильная карта CSS есть, потому что она работала нормально в других видах .. просто не работает в модальном
@MatejP. Можете ли вы сказать мне, как получить доступ к элементу, который находится внутри модального из контроллера, потому что document.getElementById возвращает нуль ..

Matej P. · Accepted Answer · 2016-06-01T11-10-00.000Z

Возможно, что $cordovaGeolocation.getCurrentPosition(posOptions).then выполняется до того, templates/mapmodal.html будет загружен шаблон templates/mapmodal.html HTML templates/mapmodal.html. Таким образом, элементы, которые вы пытаетесь восстановить с помощью document.getElementById пока не существуют. Попробуйте вызвать код после загрузки html. Также включите некоторый тайм-аут, чтобы убедиться, что модаль уже показан при инициализации карты (в качестве альтернативы вы можете посмотреть событие modal.shown).

$ionicModal.fromTemplateUrl('templates/mapmodal.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal4 = modal;
      $scope.openmapModal();
      setTimeout(function(){//here!
          getPositionAndShowOnMap(); 
      }, 500);
    });

  $scope.openmapModal = function()
  {
     $scope.modal4.show();
  };

  $scope.closemapModal = function() { 
    $scope.modal4.hide();
  };     

function getPositionAndShowOnMap(){
    var posOptions = {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 0
    };

    $cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
        var lat  = position.coords.latitude;
        var long = position.coords.longitude;
        console.log(lat);
        console.log(long);
        $ionicLoading.hide();
        $scope.initMap = function() {
            var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
            console.log('entered map');
            var myOptions = {
                zoom: 16,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            $scope.map = new google.maps.Map(document.getElementById("map"), myOptions);

            var marker = new google.maps.Marker({
                draggable: true,
                position: myLatlng,
                map: $scope.map,
                title: "Your location"
            });

            google.maps.event.addListener(marker, 'dragend', function (event) {


                document.getElementById("lat").value = event.latLng.lat();
                document.getElementById("long").value = event.latLng.lng();
            });
        };
        $scope.initMap();
    });
}

да уж!! проблема была в том что он не получал элемент elemnt ... так его называли после открытия модала