[英]Invalid LngLat object: (NaN, NaN) - getElementById not returning values
The user positions a marker which adds the Latitude and longitude to a form, this lat & long are populated based on the users entry to the database.用户放置一个标记,将纬度和经度添加到表单中,这个纬度和经度是根据用户对数据库的输入来填充的。 When trying to show the user where they set the marker and saved their lat and lon, I would like the mapbox marker to be placed using this lat and long figures.
当试图向用户展示他们在哪里设置标记并保存他们的纬度和经度时,我希望使用这个经度和经度数字放置地图框标记。
When using document.getElementById('savedlong');当使用 document.getElementById('savedlong'); this is returning Invalid LngLat object: (NaN, NaN).
这将返回 Invalid LngLat object: (NaN, NaN)。
Javascript 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 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>
You are passing the html element to setLngLat not the number value inside the p element,get the value and then parse it您将 html 元素传递给 setLngLat 而不是 p 元素内的数值,获取该值然后解析它
const marker_lat = parseFloat(document.getElementById('savedlong').innerHTML);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.