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

Posted 2021-03-28

我已经将谷歌地图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();  

答案

这是一个使用ng-map（一个用于谷歌地图的AngularJS库）的工作（在带有ios 9.2的iPad上测试）的例子。

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>

另一答案

在IOS上阻碍了place_changed事件。修复是将placed_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'));
  }

以上是关于AngularJS谷歌地图点击事件不在ios设备ipad和iphone中触发的主要内容，如果未能解决你的问题，请参考以下文章

谷歌地图显示在模拟器上，但不在设备上

谷歌地图信息窗口内的AngularJS ng-include？

AngularJS 谷歌地图指令

离子框架：不在设备上加载谷歌地图库

谷歌地图标记事件监听器点击[重复]

从可点击的谷歌地图覆盖传播鼠标事件