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

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

HTML

<div >    <div >        <form name="searchForm" ng-submit="fillinAddress()">            <div >                <input type="text"  ID="autocomplete" name="city" placeholder="Enter your city"                 onFocus="geolocate()" required />                <span >                    <button  type="submit" ladda="ldloading.slIDe_left" data- data-spinner-color="#000000"                        ng-Disabled="searchForm.$invalID">                        <i ></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>

这是一个Jsfiddle：https://jsfiddle.net/beaver71/mu5u71sg/

总结

以上是内存溢出为你收集整理的javascript – AngularJS Google Maps点击事件不会在ios设备ipad和iphone中触发全部内容，希望文章能够帮你解决javascript – AngularJS Google Maps点击事件不会在ios设备ipad和iphone中触发所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。