Question

我尝试使用here中的代码自动填充地址字段。它作为一个静态HTML文件工作正常，但当我把它放在一个aspx页面时。我没有在字段上使用任何runat = server，并且在查看呈现的HTML时，ID /名称等似乎仍然没有问题。

下面是完整的代码：

<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>

<script>
  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() {
    autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById('autocomplete')),
        {types: ['geocode']});
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    var place = autocomplete.getPlace();

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

    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;
      }
    }
  }
  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());
      });
    }
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=REDACTED&libraries=places&callback=initAutocomplete"
    async defer></script>

我在控制台中收到以下JS错误：

Test.aspx:470 Uncaught ReferenceError: google is not defined

然后当我点击其中一个自动完成建议时：

Test.aspx:485 Uncaught TypeError: Cannot set property 'value' of null

呈现的HTML似乎没问题，没有.net跟踪等

Answer 1

首先，您需要转到https://console.developers.google.com/并选择API。

在Google Maps API中选择Google Maps JavaScript API，并确保为Google Maps JavaScript启用API。

其次，您需要创建一个API密钥：

转到凭据
创建新密钥并选择浏览器密钥
无需指定任何引荐人所以你应该看到保存后允许任何推荐人。
现在，您将获得一个密钥，复制该密钥并将其粘贴到
中
js？key = YOUR_API_KEY，来自脚本标记，使用您在YOUR_API_KEY位置获得的密钥。

Google地址自动完成可用作静态HTML，但不能用于项目

1 个答案: