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