Ionic（或AngularJS）阻止谷歌地图自动完成

Question

我只是想在我的Ionic应用中添加一个简单的自动填充表单。 所以首先我尝试了there，它完全正常。 所以我尝试在我的应用程序中（首先在浏览器中）。

我把它放在我的控制器中，用ng-init =＆＃34; initMaps（）＆＃34;

调用它

    $scope.initMaps = function() {
    var center = new google.maps.LatLng(51.514032, -0.128383);
    var circle = new google.maps.Circle({
        center: center,
        radius: 50
    });
    var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
    var input = document.getElementById('autocomplete');
        var autocomplete = new google.maps.places.Autocomplete(input, options);
    autocomplete.setBounds(circle.getBounds());
    console.log("maps loaded")
}

当我查看我的控制台时，我可以看到＆＃34;地图已加载＆＃34;以及谷歌警告，如：

  

Google Maps API警告：SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

我只是在我的模板表格中填写这一行：

 <input id="autocomplete" type="text" style="width: 200px;">

所以，我认为在一个非离子（或角度）项目上，它可以正常工作。但是在这里，当我输入一些字母时，我没有得到任何结果

角度/离子是否会产生干扰？我被迫安装其他模块吗？

谢谢！ 罗宾。

Answer 1

由于Place Autocomplete是Google Maps Places Library的一部分，您可能忘记通过libraries参数加载此库，例如：

<script src="//maps.googleapis.com/maps/api/js?key={KEY}&libraries=places"></script>

示例

angular.module('ionic.example', ['ionic'])

    .controller('MapCtrl', function ($scope) {


        $scope.initMap = function () {

            var center = new google.maps.LatLng(51.514032, -0.128383);
            var circle = new google.maps.Circle({
                center: center,
                radius: 50
            });
           
            var options = { componentRestrictions: { country: 'uk' }, types: ['geocode'] }
            var input = document.getElementById('autocomplete');
            var autocomplete = new google.maps.places.Autocomplete(input, options);
            autocomplete.setBounds(circle.getBounds());

        }

        google.maps.event.addDomListener(window, 'load', $scope.initMap);

    });

.controls {
        margin-top: 10px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

 <script src="//maps.googleapis.com/maps/api/js?libraries=places"></script>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div ng-app="ionic.example" ng-controller="MapCtrl">
    <ion-header-bar class="bar-dark" >
      <h1 class="title">Map</h1>
    </ion-header-bar>
    <ion-content>
      <div id="map" data-tap-disabled="true"></div>
      <input id="autocomplete" placeholder="Enter your address" class="controls" type="text"></input>
    </ion-content>
 </div>

Codepen