AngularJS谷歌地图点击事件在iPad和iPhone设备上无法触发

Question

我已经在我的应用程序中集成了谷歌地图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.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();  

- Kannan T

---

是的，type="submit" 的按钮不起作用。请记住，在笔记本电脑/台式机浏览器中它是可以工作的，但在 iPad、iPhone 等 iOS 设备（除了笔记本电脑）上却无法工作。 - Kannan T

你能否创建一个 fiddle 或 plnkr 来重现你的问题？ - lin

现在不行，但过一段时间会做并在这里更新。 - Kannan T

你正在使用ngTouch吗？ - Randy Casburn

@kannan 不是，它既适用于AngularJS（http://ngmap.github.io/）也适用于Angular2（https://github.com/ng2-ui/map），请仔细检查。 - beaver

Answer 1

这是一个使用ng-map的实例，它是一个针对Google Maps的AngularJS库，并已在iPad上测试过（iOS 9.2）。请参考以下代码：

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>

这里有一个 jsfiddle: https://jsfiddle.net/beaver71/mu5u71sg/

- beaver

Answer 2

place_changed事件在IOS上受到阻碍。解决方法是将place_changed事件包装在一个普通的click事件中，然后像这样分派place_changed事件：

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

所以，initAutoComplete() 变成了：

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

- Randy Casburn