initAutocomplete

initAutocomplete

关注
发信
关注(28)粉丝(399)

javascript - AngularJS-为什么在使用Google的自动填充地址表格时出现此InvalidValue错误

我是第一次在localhost上实现Google自动完成地址表格，我已经成功创建了APIKey，并使用凭据检查了HTTP referrers (web sites)并添加了我的localhost url http://localhost:8383。

我正在关注此Answer加上官方的Documentation。

现在我的控制器看起来像这样

categoriesControllers.controller('PartialsController', ['$scope', '$http', '$routeParams', '$location', function ($scope, $http, $routeParams, $location) {
 var placeSearch, autocomplete;
  var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };

  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['geocode']});

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm[addressType]) {
        var val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType).value = val;
      }
    }
  }

  // Bias the autocomplete object to the user's geographical location,
  // as supplied by the browser's 'navigator.geolocation' object.
  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());
      });
    }
  };}]);


和我的HTML文件看起来像这样

    <div ng-controller="PartialsController">
<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address"
         onFocus="geolocate()" type="text"></input>
</div>

<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField"><input class="field" id="street_number"
          disabled="true"></input></td>
    <td class="wideField" colspan="2"><input class="field" id="route"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">City</td>
    <td class="wideField" colspan="3"><input class="field" id="locality"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField"><input class="field"
          id="administrative_area_level_1" disabled="true"></input></td>
    <td class="label">Zip code</td>
    <td class="wideField"><input class="field" id="postal_code"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3"><input class="field"
          id="country" disabled="true"></input></td>
  </tr>
</table>
</div>


我在这样的index.html中添加了密钥

 <script src="https://maps.googleapis.com/maps/api/js?key=xxx&libraries=places&callback=initAutocomplete"
    async defer></script>

最佳答案

如果出现此错误：


  InvalidValueError：initAutocomplete不是函数


那么显然会发生，因为找不到initAutocomplete。在您的情况下，initAutocomplete是在categoriesControllers范围内定义的私有函数，并且不能通过callback参数访问。

解

一种选择是更改initAutocomplete函数的初始化和调用方式：

1）同步加载Google Maps API，并从查询字符串中省略callback参数：

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


2）一旦实例化控制器，就调用initAutocomplete函数，例如：

$scope.initAutocomplete = function () {
   //...
}
$scope.initAutocomplete();


例



var app = angular.module('app', []);

app.controller('myController', function ($scope) {

  $scope.components = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };

  $scope.formData = {};


  $scope.initAutocomplete = function () {
    var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), {
      types: ['geocode']
    });
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
      $scope.$apply(function(){
          var place = autocomplete.getPlace();
          $scope.fillInAddress(place);
      });
    });

  }


  $scope.fillInAddress = function (place) {

    Object.keys($scope.components).forEach(function (component) {
      $scope.formData[component] = '';
      document.getElementById(component).disabled = false;
    });

    place.address_components.forEach(function (component) {
      var addressType = component.types[0];
      if ($scope.components[addressType]) {
        $scope.formData[addressType] = component[$scope.components[addressType]];
      }
    });
  }

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


});

#locationField,
#controls {
  position: relative;
  width: 480px;
}
#autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99%;
}
.label {
  text-align: right;
  font-weight: bold;
  width: 100px;
  color: #303030;
}
#address {
  border: 1px solid #000090;
  background-color: #f0f0ff;
  width: 480px;
  padding-right: 2px;
}
#address td {
  font-size: 10pt;
}
.field {
  width: 99%;
}
.slimField {
  width: 80px;
}
.wideField {
  width: 200px;
}
#locationField {
  height: 20px;
  margin-bottom: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>


<div ng-app='app' ng-controller='myController'>
  <div id="locationField">
    <input id="autocomplete" placeholder="Enter your address" type="text">
  </div>
  <table id="address">
    <tr>
      <td class="label">Street address</td>
      <td class="slimField">
        <input ng-model="formData.street_number" class="field" id="street_number" disabled="true" type="text">
      </td>
      <td class="wideField" colspan="2">
        <input ng-model="formData.route" class="field" id="route" disabled="true">
      </td>
    </tr>
    <tr>
      <td class="label">City</td>
      <td class="wideField" colspan="3">
        <input ng-model="formData.locality" class="field" id="locality" disabled="true">
      </td>
    </tr>
    <tr>
      <td class="label">State</td>
      <td class="slimField">
        <input ng-model="formData.administrative_area_level_1" class="field" id="administrative_area_level_1" disabled="true">
      </td>
      <td class="label">Zip code</td>
      <td class="wideField">
        <input ng-model="formData.postal_code" class="field" id="postal_code" disabled="true">
      </td>
    </tr>
    <tr>
      <td class="label">Country</td>
      <td class="wideField" colspan="3">
        <input ng-model="formData.country" class="field" id="country" disabled="true">
      </td>
    </tr>
  </table>
</div>

关于javascript - AngularJS-为什么在使用Google的自动填充地址表格时出现此InvalidValue错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40124134/

10-10 04:06
Powered by LMLPHP ©2024 initAutocomplete 0.030108