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

请访问AEM Forms示例页面,获取此功能的实时演示链接。

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

遵循以下步骤在自适应Forms中使用地理位置API。

  1. 从Google 获取API密钥以使用Google Maps平台。您可以获得有效期为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中将HTTP协议与localhost结合使用。

对于生产服务器,您需要为AEM服务器启用SSL才能获取此功能。

与本文关联的示例已使用美国地址进行测试。 如果要在其他地理位置使用此功能,则可能必须调整JSON解析。

要将此功能安装到您的服务器上,请执行以下步骤

  • 安装并启动AEM Forms服务器。

!![NOTE] 此功能已在AEM Forms 6.3及更高版本上进行测试

在此页面上