在最適化Forms中使用地理位置API

最後更新： 2025年5月5日
  • 適用對象：
  • Experience Manager 6.4
  • Experience Manager 6.5

建立對象：

  • 經驗豐富
  • 開發人員

在本文中，我們將瞭解如何使用Google的地理位置API填入調適型表單的欄位。 當您想要填入表單上的目前位址列位時，通常使用此使用案例。

在適用性Forms中使用地理位置API時，需遵循下列步驟。

  1. 從Google 取得API金鑰以使用Google地圖平台。 您可以取得試用金鑰，有效期為1年。

  2. 最適化表單片段是使用儲存目前位址的欄位建立的

  3. Geolocation API是在最適化表單影像物件的點選事件上叫用的

  4. 已剖析API呼叫傳回的JSON資料，並據此設定調適型表單欄位值。

navigator.geolocation.getCurrentPosition(showPosition);
function showPosition(position)
{
console.log(" I am inside the showPosition in fragment");
console.log("Latitude: " + position.coords.latitude + "Longitude " + position.coords.longitude);
var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+position.coords.latitude+","+position.coords.longitude+"&key=<your_api_key>";
  console.log(url);

  $.getJSON(url,function (data, textStatus){

    var location=data.results[0].formatted_address;
    console.log(location);

    for(i=0;i<data.results[0].address_components.length;i++)
        {
          if(data.results[0].address_components[i].types[0] == "street_number")
            {
              streetNumber.value = data.results[0].address_components[i].long_name;
            }
          if(data.results[0].address_components[i].types[0] == "route")
            {
              streetName.value = data.results[0].address_components[i].long_name;
            }
            if(data.results[0].address_components[i].types[0] == "postal_code")
            {

              zipCode.value = data.results[0].address_components[i].long_name;
            }
            if(data.results[0].address_components[i].types[0] == "locality")
            {

              city.value = data.results[0].address_components[i].long_name;
            }
          if(data.results[0].address_components[i].types[0] == "administrative_area_level_1")
            {

              state.value = data.results[0].address_components[i].long_name;
            }
        }

  });
}

填入geoloaction api的欄位

在第1行，我們使用HTML地理位置API來取得目前位置。 取得目前位置後，我們會將目前位置傳遞給showPosition函式。

在showPosition函式中，我們使用Google API來擷取指定經緯度的位址詳細資料。

API傳回的JSON接著會經過剖析，以設定調適型表單欄位。

注意
為了測試目的，您可以將HTTP通訊協定與URL中的localhost搭配使用。
若使用生產伺服器，您必須為AEM伺服器啟用SSL，才能取得此功能。
與本文相關的範例已透過美國地址進行測試。 如果您想在其他地理位置使用此功能，則可能必須調整JSON剖析。

若要讓伺服器具備此功能，請遵循下列步驟

  • 安裝並啟動AEM Forms伺服器。

此功能已在AEM Forms 6.3及更高版本上測試

recommendation-more-help