在自适应Forms中使用地理位置API

最近更新： 2025年5月5日

适用对象：
Experience Manager 6.4
Experience Manager 6.5

主题：
自适应表单

创建对象：

有经验的
开发人员

在本篇文章中，我们将了解如何使用Google的地理位置API填充自适应表单的字段。当您要填充表单上的当前地址字段时，通常使用此用例。

在自适应Forms中使用地理位置API时，需要执行以下步骤。

从Google 获取API密钥以使用Google映射平台。您可以获得有效期为1年的试用密钥。
创建自适应表单片段时添加了用于保存当前地址的字段
在自适应表单的图像对象的单击事件上调用了地理位置API
对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服务器。

此功能已在AEM Forms 6.3及更高版本上测试

获取Google API密钥。

将与本文相关的资源导入AEM。

在编辑模式下打开自适应表单片段。

打开图像选择组件的规则编辑器。

将<your_api_key>替换为Google API密钥。

保存更改。

预览表单。

单击“地理位置”图标。

应使用当前位置填充您的表单。

recommendation-more-help