Google Maps不在Ionic Modal中显示 [英] Google Maps not showing in Ionic Modal

问题描述

我正在尝试以离子模式显示google map，但是它没有显示..但是当我在页面上显示它时，它会显示出来.请我为此提供一些帮助.这很烦人.下面是我的控制器js和离子模态.

I'm trying to show the google map in an ionic modal but it doesnt show up..but when i show it on page it shows up.Please i need some help regarding this.Its very annoying. Below in my controler js and ionic modal.

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

推荐答案

在加载HTML模板templates/mapmodal.html之前，有可能正在运行$cordovaGeolocation.getCurrentPosition(posOptions).then.这样，您尝试使用document.getElementById检索的元素尚不存在.尝试在html加载后调用代码.还包括一些超时，以确保在初始化地图时已经显示了模态(或者您可以观看modal.shown事件).

It's possible that $cordovaGeolocation.getCurrentPosition(posOptions).then is being run before the HTML template templates/mapmodal.html is loaded. That way the elements you are trying to retrieve using document.getElementById don't exist yet. Try to call the code after the html is loaded. Also include some timeout to make sure the modal is already shown when initialising the map (alternatively you can watch for modal.shown event).

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

这篇关于Google Maps不在Ionic Modal中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！