javascript – AngularJS Google Maps点击事件不会在ios设备ipad和iphone中触发

我已经将谷歌地图API与我的应用程序集成以获得自动完成建议,它在我的笔记本电脑(Ubuntu)所有浏览器上运行良好.但是,最近我用iPad和iPhone测试过它不起作用.我无法点击建议的地点.我正在使用AngularJS,我的代码片段如下：

HTML

<div class="row">
    <div class="col-md-6">
        <form name="searchForm" ng-submit="fillInAddress()">
            <div class="input-group well">
                <input type="text" class="form-control" id="autocomplete" name="city" placeholder="Enter your city" 
                onFocus="geolocate()" required />
                <span class="input-group-btn">
                    <button class="btn btn-priMary" type="submit" ladda="ldloading.slide_left" data-style="slide-left" data-spinner-color="#000000"
                        ng-disabled="searchForm.$invalid">
                        <i class="fa fa-search"></i> Search
                    </button>
                </span>
            </div>
        </form>
    </div>
</div>

JS

var placeSearch,autocomplete;

  function initAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')),{types: ['geocode']});
    autocomplete.addListener('place_changed',fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();
    LOCATIOnfilter.lat=place.geometry.LOCATIOn.lat();
    LOCATIOnfilter.lon=place.geometry.LOCATIOn.lng();
    $scope.getorders($scope.reportParams,LOCATIOnfilter);
  }

  $scope.getorders = function(pagination,LOCATIOnfilter) {
    $scope.working = true;
    sliveorders
      .getLocorders(pagination,LOCATIOnfilter)
      .then(function(res) {
        $scope.orders=res.data;
        $scope.@R_979_10586@lItems=res.@R_979_10586@l;  
        $scope.working = false;
      })
      .catch(function(err) {
        console.log('LOCATIOn search err:',err);
        $scope.working = false;
      });  
  }

  function geolocate() {
    if (navigator.geoLOCATIOn) {
      navigator.geoLOCATIOn.getCurrentPosition(function(position) {
        var geoLOCATIOn = {
          lat: position.coords.latitude,lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geoLOCATIOn,radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  };
  initAutocomplete();

angular.module("app",['ngMap']).controller("MyCtrl",function($scope,NgMap) {
    var vm = this;
    //vm.types = "['geocode']";
    vm.types = "['establishment']";
    vm.usebounds = false;
    
    vm.placeChanged = function() {
        vm.place = this.getPlace();
        console.log('LOCATIOn',vm.place.geometry.LOCATIOn);
        vm.map.setCenter(vm.place.geometry.LOCATIOn);
    }
    
    vm.geolocate = function() {
      if (navigator.geoLOCATIOn) {
      	console.log("geolocate");
        navigator.geoLOCATIOn.getCurrentPosition(function(position) {
          var geoLOCATIOn = {
            lat: position.coords.latitude,lng: position.coords.longitude
          };
          console.log("position",position);
          if (vm.usebounds) {
            vm.mybounds = {
              center: geoLOCATIOn,radius: position.coords.accuracy
            };
          }
          vm.map.setCenter(geoLOCATIOn);  
        });
      }
    };
    
    NgMap.getMap().then(function(map) {
      	vm.map = map;
    });

});

<script src="https://cdnjs.cloudFlare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://rawgit.com/ALLENhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<script src="https://maps.google.com/maps/api/js?libraries=places,visualization,drawing,geometry,places"></script>

<div ng-app="app">
    <div ng-controller="MyCtrl as vm">
      Enter your city: <br/>
      <input places-auto-complete size=80
        ng-model="vm.address"
        component-reStrictions="{Country:'us'}"
        types="{{types}}"
        ng-focus="vm.geolocate()"
        Strict-bounds="true"
        circle-bounds="{{vm.mybounds}}"
        on-place-changed="vm.placeChanged()" /> <br/>
     <input type="checkBox"
       ng-model="vm.usebounds">use bounds
        <br/>
      <div ng-show="vm.place">
        Address = {{vm.place.formatted_address}} <br/>
        LOCATIOn: {{vm.place.geometry.LOCATIOn}}<br/>
      </div>
      <hr>
      bounds: {{vm.mybounds}}
    </div>
    <ng-map></ng-map>
</div>