时间戳

首页 > 解决方案 > 无效的 LngLat 对象：(NaN, NaN) - getElementById 不返回值

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

问题描述

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

当使用 document.getElementById('savedlong'); 这将返回无效的 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>

标签： javascripthtmldjangomapbox

解决方案

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

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

推荐阅读