Question

我正试图以离子模式显示谷歌地图，但它并没有显示出来..但是当我在页面上显示它时，它显示出来。请给我一些帮助。这非常烦人。下面是我的控制器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>

Answer 1

在加载HTML模板$cordovaGeolocation.getCurrentPosition(posOptions).then之前，可能会运行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();
    });
}

Google地图未在Ionic Modal中显示

1 个答案: