在CFSET中使用GeoLocation变量

Question

我正在尝试捕获地理位置数据并将其插入数据库中。

下面的代码是我试图捕获浏览器的经度和纬度并将值保存在两个表单字段中的尝试。问题在于输出代码生成两个表单字段（即“经度”和“经度”）的多个实例。这是正在填充的一组单个字段的屏幕截图。我如何填充其余部分？

表单代码：

<div class="table-responsive">
   <table class="table table-1" style="color:##000000">
      <tr>
         <td>Tree No</td>
         <td>Current Status</td>
         <td>Graft Successful</td>
         <td>NOT Grafted</td>
         <td>Graft unsuccessful</td>
         <td>Tree Died</td>
      </tr>
      <cfoutput query="rsTreeList" >
         <tr>
            <td>#TreeID#</td>
            <td>#Status#</td>
            <td>
               <form name="form1" method="post" action="Recon_Update_Logic1.cfm?ID=#TreeID#">
                  <img src="images/Icons/Success.jpg" width="25" height="25" alt=""/>
                  <input id="latitude" name="latitude" type="text" />
                  <input id="longitude" name="longitude" type="hidden" />
                  <input name="submit" type="submit" id="Submit" value="Graft Successful">
               </form>
            </td>
            <td>
               <form name="form1" method="post" action="Recon_Update_Logic2.cfm?ID=#TreeID#">
                  <img src="images/Icons/NotGrafted.jpg" width="25" height="25" alt=""/>
                  <input id="latitude" name="latitude" type="text" />
                  <input id="longitude" name="longitude" type="hidden" />
                  <input name="submit" type="submit" id="Submit" value="NOT Grafted">
               </form>
            </td>
            <td>
               <form name="form1" method="post" action="Recon_Update_Logic3.cfm?ID=#TreeID#">
                  <img src="images/Icons/GraftUnsuccessful.jpg" width="25" height="25" alt=""/>
                  <input id="latitude" name="latitude" type="hidden" />
                  <input id="longitude" name="longitude" type="hidden" />
                  <input name="submit" type="submit" id="Submit" value="Graft Unsuccessful">
               </form>
            </td>
            <td>
               <form name="form1" method="post" action="Recon_Update_Logic4.cfm?ID=#TreeID#">
                  <img src="images/Icons/TreeDead.jpg" width="25" height="25" alt=""/>
                  <input id="latitude" name="latitude" type="hidden" />
                  <input id="longitude" name="longitude" type="hidden" />
                  <input name="submit" type="submit" id="Submit" value="Tree Dead">
               </form>
            </td>
         </tr>
      </cfoutput>
   </table>
</div>

以下代码尝试填充所有“纬度”和“经度”元素：

<cfloop index="i" from="1" to="#rsTreeList.recordCount#">   
    <script>

    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
    }

    function showPosition(position)
    {
        document.getElementById("latitude").value = position.coords.latitude; 
        document.getElementByID("longitude").value = position.coords.longitude; 
    }
    getLocation();
   </script>
</cfloop>