Question

我在android平台的基于角度的移动应用中使用google places API。

我可以使用API从文本字段值中获取搜索结果，但是当我通过单击其中一个搜索结果选择一个选项时，文本框仍为空。但是当我按住并保持搜索结果选项2-3秒时，选择该选项。

这对我来说似乎很奇怪，但它正在发生 place_changed event没有被快速点击触发我真的不知道这个问题的原因是什么？我已经尝试Faskclick.j来消除300毫秒，但是虽然我认为这个问题与300毫秒的延迟没有关系但是没有用。

我的代码：

 function initialize() {
    var autocomplete = new google.maps.places.Autocomplete(input, options);
};

请帮帮我。

Answer 1

我在以下示例中一起使用了ngMap和angular-google-places-autocomplete。

希望它有所帮助。

＆＃13;

angular.module('app', ['ionic', 'google.places', 'ngMap'])

.controller('MapCtrl', ['$scope', 'NgMap',
	function ($scope, NgMap) {

		$scope.location = null;

		NgMap.getMap().then(function (map) {
			console.log("getMap");
			$scope.map = map;
		});
		
		$scope.$on('g-places-autocomplete:select', function(event, place) {
			console.log('new location: ' + JSON.stringify(place));
			$scope.data = {
				lat: place.geometry.location.lat(),
				lng: place.geometry.location.lng()
			};
			$scope.map.setCenter(place.geometry.location);
			console.log($scope.data);
		});
	}
]);

＆＃13;

.map {
  width: 100%;
  height: 500px !important;
}

＆＃13;

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>

  <script src="https://maps.google.com/maps/api/js?libraries=visualization,drawing,geometry,places"></script>
  <link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script src="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.js"></script>
  <link href="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  
  <script src="app.js"></script>
</head>

<body ng-app="app" ng-controller="MapCtrl">
  <ion-pane>
<ion-header-bar class="bar-positive">
  <h1 class="title">Ionic map</h1>
</ion-header-bar>
<ion-content class="has-header padding">
  
  <div class="item item-input-inset">
      <label class="item-input-wrapper">
        <input type="text" g-places-autocomplete ng-model="location" placeholder="Insert address/location"/>
      </label>
      <button ng-click="location = ''" class="button ion-android-close input-button button-small" ng-show="location"></button>
  </div>
  <ng-map zoom="6" class="map">
    <marker position="{{data.lat}}, {{data.lng}}"></marker>
  </ng-map>
</ion-content>
  </ion-pane>
</body>

</html>

＆＃13;

Answer 2

我没有找到它的解决方案，但https://github.com/stephjang/placecomplete是一个很棒的插件，可以解决这个问题：）

无法在Google地方选择自动填充结果

2 个答案: