Question

我试图在离子模态中使用google地方但无法选择地点。

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

任何帮助将不胜感激。

看我的傻瓜：

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>

modal 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();

  }

});

的问候，

Answer 1

经过几个小时的网络研究，我开始自己搜索解决方案并最终找到它。

＆＃xA;＆＃xA;

Ionic添加了“指针 - 事件：无”css风格打开一个模态视图。＆＃xA;这会抑制所有光标事件，例如悬停等。所以我们无法获得Places-Ites-Hover-Event。

＆＃xA;＆＃xA;

Just添加“pointer-events：auto;”样式到.pac-container类。

＆＃xA;＆＃xA;

这对我有用。

＆＃xA;

谷歌没有在离子模态屏幕上工作

1 个答案: