AngularJS谷歌地图点击事件不在ios设备ipad和iphone中触发

Question

I have integrated google maps API with my app for autocomplete suggestions, it is working fine on my laptop(Ubuntu) all browsers as well. However, recently I have tested with iPad and iPhone it doesn't work. I'm unable to click the suggested places. I'm using AngularJS and my code snippet is below:

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.totalItems=res.total;  
        $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();  

Answer 1

Here is a working (tested on iPad with IoS 9.2) example using ng-map , an AngularJS library for Google Maps.

 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> 

And here is a jsfiddle: https://jsfiddle.net/beaver71/mu5u71sg/

Answer 2

The place_changed event is hampered on IOS. The fix is to wrap the placed_changed event inside a normal click event that then dispatches the place_changed event like this:

document.getElementById('autocomplete')
  .addEventListener('click', e=>autocomplete.dispatchEvent('place_changed'));

so initAutoComplete() becomes:

  function initAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')),
    {types: ['geocode']});
    document.getElementById('autocomplete')
       .addEventListener('click', e=>autocomplete.dispatchEvent('place_changed'));
  }