Mapbox获取经纬度坐标并放入HTML表单值答案

【问题标题】：Mapbox obtaining longitude and latitude coordinates and place them into HTML form valueMapbox获取经纬度坐标并放入HTML表单值
【发布时间】：2023-01-13 01:42:44
【问题描述】：

我正在尝试创建一个函数，每当用户单击地图时，它都会自动记录经度和纬度并将它们存储到变量中。这些变量将用作 HTML 表单的隐藏输入值。

Java脚本：

    map.on('click', function(e) {
        var latitude = e.latlng.lat;
        var longitude = e.latlng.lng;
        console.log(latitude)
        console.log(longitude)
        document.getElementById("longtitude").value = JSON.stringify(longitude);
        document.getElementById("latitude").value = JSON.stringify(latitude);
    });

HTML 隐藏输入：

<body>
        <div class="form-popup" id="myForm">
          <form method='POST'
          id = "comment-form"
          action="https://sheetdb.io/api/v1/coogkakrw27a5"
          class="form-container">
    
            <div if="form_alerts"></div>
            <h2>Comment</h2>

            <input type="hidden" id="longtitude" name="data[longitude]" value="">
            <input type="hidden" id ="latitude" name="data[latitude]" value="">
        
          </form>
        </div>
       </body>

我希望每次用户单击时隐藏的输入值都会改变，但它似乎根本没有改变。我不确定出了什么问题。

【问题讨论】：

标签： javascript html mapbox-gl-js

【解决方案1】：

分配纬度和经度变量时出错。使用 var latitude = e.lngLat.lat; var longitude = e.lngLat.lng; 代替您的 e.latlng.lat 和 e.latlng.lng。

在这个简单的示例https://jsfiddle.net/ToniBCN/rjqawbn4/8/ 中查看它的实际效果

【讨论】：