无效的 LngLat 对象：(NaN, NaN) - getElementById 不返回值

Posted 2023-02-23

【中文标题】无效的 LngLat 对象：(NaN, NaN) - getElementById 不返回值

【英文标题】：Invalid LngLat object: (NaN, NaN) - getElementById not returning values

【发布时间】：2021-05-10 18:26:29

【问题描述】：

用户放置一个标记，将纬度和经度添加到表单中，此纬度和经度是根据用户对数据库的输入来填充的。当试图向用户展示他们设置标记的位置并保存了他们的经纬度时，我希望使用这个经度和经度数字来放置地图框标记。

当使用 document.getElementById('savedlong');这将返回 Invalid LngLat 对象：(NaN, NaN)。

javascript

window.onload = function() 
    var marker_lat = document.getElementById('savedlong');
    var marker_long = document.getElementById('savedlat');

    var marker = new mapboxgl.Marker(
        element:markerElement,
        draggable: false
    )
    .setLngLat([marker_long, marker_lat])
    .addTo(map);
    

html

<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
          <div class="card-body">
               % for instance in object_list %
                    <p>Safezone name: instance.name</p>
                    <p>Alert email: instance.useremail</p>
                    <p id="savedlong">instance.longitudecentre</p>
                    <p id="savedlat">instance.latitudecentre</p>
                % endfor %

          </div>
      </div>

【参考方案1】：

您将 html 元素传递给 setLngLat 而不是 p 元素内的数字值，获取该值然后解析它

const marker_lat = parseFloat(document.getElementById('savedlong').innerHTML);

【讨论】：

谢谢@mario。我之前曾尝试使用 parseFloat，但缺少 .innerHTML，所以谢谢！