Google地方不能在离子模态屏幕上工作

我想使用谷歌地点离子模式，但不能选择的地方。Google地方不能在离子模态屏幕上工作

主屏幕工作正常。我可以搜索并选择一个位置。但是当您通过单击“Google Place”按钮打开模式窗口时，我无法在模式窗口中选择地址。我在模态窗口中没有获得经纬度。

任何帮助将不胜感激。

看到我plunker：

http://plnkr.co/edit/e01DFWDvicLJa6Ouluz7?p=preview1

这里是我的html：

<ion-content> 
    <div> 
     <div>Google Places Autocomplte integration in Angular</div> 
     <div>To Test, start typing the name of any Indian city</div> 
     <div>selection is: {{chosenPlace}}</div> 
     <div> 
     <input ng-model="chosenPlace" details="chosenPlaceDetails" googleplace/> 
     </div> 

     <div>lat: {{chosenPlaceDetails.geometry.location.lat()}}</div> 
     <div>lang: {{chosenPlaceDetails.geometry.location.lng()}}</div> 
    </div> 

    <!-- <div id="map" data-tap-disabled="true"></div> --> 
    </ion-content>

HTML模式：

<div class="modal"> 
    <ion-header-bar> 
    <h1 class="title">Choose </h1> 
    <a ng-click="closeGooglePlaceModal()()" class="button button-icon icon ion-close"></a> 
    </ion-header-bar> 
    <ion-content> 
    <ul class="list"> 
     <li class="item" ng-click="clickLocationItem(item.ID)" ng-repeat="item in locations" ng-bind-html="item.Nome"></li> 
    </ul> 

    <div> 
     <div>Google Places Autocomplte integration in Angular</div> 
     <div>To Test, start typing the name of any Indian city</div> 
     <div>selection is: {{chosenPlace1}}</div> 
     <div>details object is Lattitude: {{chosenPlaceDetails1.geometry.location.lat()}}</div> 

     <div> 
     <input ng-model="chosenPlace1" details="chosenPlaceDetails1" googleplace/> 
     </div> 
    </div> 

    </ion-content> 
</div>

app.js：

// Ionic Starter App 

// angular.module is a global place for creating, registering and retrieving Angular modules 
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) 
// the 2nd parameter is an array of 'requires' 
angular.module('starter', ['ionic', 'ngCordova']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    if (window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 


/*https://github.com/jvandemo/angularjs-google-maps*/ 
.directive('googleplace', function() { 
    return { 
    require: 'ngModel', 
    scope: { 
     ngModel: '=', 
     details: '=?' 
    }, 
    controller: function($scope) { 

     //$scope.gPlace; 

     console.log("....1"); 
    }, 

    link: function(scope, element, attrs, model) { 
     var options = { 
     types: [], 
     componentRestrictions: {} 
     }; 
     scope.gPlace = new google.maps.places.Autocomplete(element[0], options); 

     google.maps.event.addListener(scope.gPlace, 'place_changed', function() { 

     console.log("....2"); 
     scope.$apply(function() { 
      scope.details = scope.gPlace.getPlace(); 
      console.log(scope.details.geometry.location.lat()); 
      model.$setViewValue(element.val()); 
     }); 
     }); 
    } 
    }; 
}) 


.controller('MapCtrl', function($scope, $ionicLoading, $compile, $cordovaGeolocation, $ionicPlatform, $ionicModal) { 

    $scope.gPlace; 

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

    // $scope.modal.show(); 
    }); 

    $scope.openGooglePlace = function() { 

    /*prepare modal*/ 

    $scope.modalGooglePlace.show(); 


    } 

    $scope.closeGooglePlaceModal = function() { 

    $scope.modalGooglePlace.hide(); 

    } 

});

关于，

来源

2015-10-23 Arun Das

你解决了这个问题吗？我有同样的问题。 – Daniel

经过数小时的网络研究，我开始自行搜索解决方案，最后找到它。

Ionic在打开模态视图时添加了“pointer-events：none”css样式。这会禁止所有游标事件，例如悬停等，因此我们无法获取Places-Ites-Hover-Event。

只需添加“pointer-events：auto;”样式转换为.pac-container类。

这对我来说诀窍。

来源

2016-02-28 10:21:05 jg129545

伟大的提示。最近两个小时我正在寻找这个。谢谢！。 – Muthu17

Google地方不能在离子模态屏幕上工作

回答

相关问题