【问题标题】:Google Maps Autocomplete Province谷歌地图自动填充省份
【发布时间】:2018-04-28 20:23:50
【问题描述】:

我正在使用 Google Maps API 指南进行自动完成:

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

但似乎无法检测到意大利各省。

例如:输入意大利地址“Caronno Pertusella, VA, Italia”,我无法检测到“VA”。

我尝试添加和更改参数:https://developers.google.com/maps/documentation/javascript/geocoding

但是我找不到省份参数。

【问题讨论】:

    标签: jquery google-maps google-maps-api-3 autocomplete


    【解决方案1】:

    这本来可以更容易。我认为您正在寻找administration_area_level_2。因为这个级别因国家/地区而异,您必须测试,哪个级别适合您的需要。附加了一个带有管理性区域级别_2('short_name')的示例。莱因哈德,你可以玩一点儿

    <!DOCTYPE html>
    <html>
      <head>
        <title>Place Autocomplete Address Form</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
          /* Always set the map height explicitly to define the size of the div
           * element that contains the map. */
          #map {
            height: 100%;
          }
          /* Optional: Makes the sample page fill the window. */
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>
        <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
        <style>
          #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;
          }
        </style>
      </head>
    
      <body>
        <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>
            <!-- Note: Selection of address components in this example is typical.
                 You may need to adjust it for the locations relevant to your app. See
                 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
            -->
            <td class="wideField" colspan="3"><input class="field" id="locality"
                  disabled="true"></input></td>
          </tr>
          <tr>
            <td class="label">Region</td>
            <td class="slimField"><input class="field"
                  id="administrative_area_level_2" 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">State</td>
            <td class="wideField" colspan="3"><input class="field"
                  id="administrative_area_level_1" 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>
          // This example displays an address form, using the autocomplete feature
          // of the Google Places API to help users fill in the information.
    
          // This example requires the Places library. Include the libraries=places
          // parameter when you first load the API. For example:
          // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
    
          var placeSearch, autocomplete;
          var componentForm = {
            street_number: 'short_name',
            route: 'long_name',
            locality: 'long_name',
            administrative_area_level_1: 'short_name',
            administrative_area_level_2: '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;
              }
            }
          }
    
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?&libraries=places&callback=initAutocomplete"
            async defer></script>
      </body>
    </html>

    【讨论】:

      【解决方案2】:

      如果您搜索:“Caronno Pertusella VA, Italia”= 在 VA 之前没有逗号,您会得到它。 “Caronno Pertusella VA,它”也将起作用。在城市逗号之后,自动完成等待国家或国家代码。

      顺便问一下,你为什么不直接选择自动完成的建议之一呢?如果您输入“Caronno”,您会得到建议:“Caronno Pertusella Varese, Italia”

      【讨论】:

      • 我觉得我的问题不清楚,不知道回省是哪个字段。在“componentForm”变量中:` var componentForm = { street_number: 'short_name', route: 'short_name', locality: 'long_name', Administrative_area_level_1: 'short_name', country: 'long_name', postal_code: 'short_name', sublocality: ' long_name',交集:'long_name' };`
      猜你喜欢
      • 2016-10-17
      • 2015-03-22
      • 1970-01-01
      • 1970-01-01
      • 2014-06-28
      • 2016-08-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多