angular-google-在 iOS 设备上映射离子

Question

我尝试将 google 地图添加到我的 Ionic 应用程序。在浏览器中一切正常，但在 iOS 设备上却不行。

我的问题是搜索框。我可以在这个地方输入，我会看到下拉列表。但是当我 select 列表之一时，我必须按键盘上的 "Done" 按钮来更新输入字段。

我没有找到解决这个问题的方法。目前我不确定 Ionic 是否适合我的应用程序。也许这对它来说太过分了。

也许这里有人知道我错过了什么。这是我第一次使用 Ionic。

这是我的代码：

查看

 <ion-view view-title="mapview">
   <ion-content class="has-header map-container" >
     <div class="angular-google-map-container" >
       <ui-gmap-google-map center="mapview.map.center" events="mapview.map.events" zoom="mapview.map.zoom" >
         <ui-gmap-search-box template="searchbox.tpl.html" events="mapview.map.events" ></ui-gmap-search-box>
       </ui-gmap-google-map>
     </div>
   </ion-content>
 </ion-view>

JS:

angular.module('XXXX')
  .config(function(uiGmapGoogleMapApiProvider) {
     uiGmapGoogleMapApiProvider.configure({
      'API_KEY_FOR_ANDROID': 'XXXX',
      'API_KEY_FOR_IOS': 'XXXX',
      v: '3.20',
      libraries: 'places'
     });
   })
  .directive('mapview', function() {
    return {
      restrict: 'E',
      templateUrl: 'client/mapview/mapview.html',
      controllerAs: 'mapview',
      controller: function($scope, $reactive, $rootScope) {
        $reactive(this).attach($scope);
        this.map = {
          center: {
          latitude: 45,
          longitude: -73
         },
        zoom: 12,
        events: {
          places_changed: (searchBox) => {
            var places = searchBox.getPlaces();
            if (places) {
              this.map.center.latitude = places[0].geometry.location.lat();
              this.map.center.longitude = places[0].geometry.location.lng();
            }
          }
        }
      };
     }
    }
  })
  .run(['$templateCache', function ($templateCache) {
    $templateCache.put('searchbox.tpl.html', '<input id="pac-input" class="pac-controls" type="text" placeholder="Search" >');
  }])

Answer 1

我遇到了同样的问题。您需要在生成的元素上禁用数据抽头。这意味着您将需要一个额外的指令，如下所示：

.directive('disabletap', function($timeout) {
  return {
    link: function() {
      $timeout(function() {
        container = document.getElementsByClassName('pac-container');
        // disable ionic data tab
        angular.element(container).attr('data-tap-disabled', 'true');
        // leave input field if google-address-entry is selected
        angular.element(container).on("click", function(){
            document.getElementById('type-selector').blur();
        });

      },500);

    }
  };
});

然后终于记得将指令添加到元素中，它应该可以工作。

angular-google-在 iOS 设备上映射离子

angular-google-maps ionic on iOS device

google-maps

angularjs

ionic