Question

我有谷歌的下列代码可以正常使用：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<meta charset="utf-8">

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>

<script>

    var placeSearch, autocomplete;
    var componentForm = {
      country: 'short_name',
      locality: 'long_name',
      postal_code: 'short_name'
    };

    function initialize() {
      autocomplete = new google.maps.places.Autocomplete(
          /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
          { types: ['geocode'] });
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        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 = new google.maps.LatLng(
              position.coords.latitude, position.coords.longitude);
          var circle = new google.maps.Circle({
            center: geolocation,
            radius: position.coords.accuracy
          });
          autocomplete.setBounds(circle.getBounds());
        });
      }
    }

</script>

<div id="locationField" style="margin-left: 3px;">
  <input id="autocomplete" placeholder="ADDRESS" onFocus="geolocate()" type="text"></input>
</div>

<table id="address">

<tr>
    <td class="wideField" colspan="3"><input class="field" id="country" disabled="true"></input></td>

    <td class="wideField" colspan="3"><input class="field" id="locality" disabled="true"></input></td>

    <td class="wideField"><input class="field" id="postal_code" disabled="true"></input></td>
</tr>

</table>

我想添加另一个带有自己输入字段的表来自动完成第二个表中的第二个地址但是没有成功。

<div id="locationField" style="margin-left: 3px;">
  <input id="autocomplete" placeholder="ADDRESS2" onFocus="geolocate()" type="text"></input>
</div>

<table id="address">

<tr>
    <td class="wideField" colspan="3"><input class="field" id="country2" disabled="true"></input></td>

    <td class="wideField" colspan="3"><input class="field" id="locality2" disabled="true"></input></td>

    <td class="wideField"><input class="field" id="postal_code2" disabled="true"></input></td>
</tr>

</table>

Answer 1

我看到你给一些标签id，例如<table id="address"> 首先，您应该尝试修复这些问题，但您无法在多个标记上使用id。

谷歌地图自动完成HTML表格

1 个答案: