在適用性Forms中使用地理位置API

請造訪AEM Forms範例頁面，以取得此功能的即時示範連結。

在本文中，我們將探討如何使用Google的地理位置API來填入最適化表單的欄位。 當您想要填入表單上的目前地址欄位時，通常會使用此使用案例。

請依照下列步驟，在適用性Forms中使用地理位置API。

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

  2. 已使用欄位建立最適化表單片段以保留目前的地址

  3. 適用性表單影像物件的點擊事件會叫用地理位置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;
            }
        }
    
  });
}

填入地理位置api的欄位

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

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

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

注意

為了進行測試，您可以在URL中使用具有localhost的HTTP通訊協定。

對於生產伺服器，您需要為AEM伺服器啟用SSL才能取得此功能。

與本文相關的範例已透過美國地址測試。 如果您想在其他地理位置中使用此功能，可能必須調整JSON剖析。

若要將此功能連接到您的伺服器，請執行下列步驟

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

!![NOTE] 此功能已在AEM Forms 6.3及更新版本上測試

本頁內容