Mapbox script to html

我在mapbox页面上找到了这个代码。我需要这些坐标传递到html形式。最好的方法是什么?我试过使用getdocumentbyId，但由于某种原因，我有更多的错误，它根本不起作用。

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" />
</head>
<body>

<div id="map"></div>
<pre id="coordinates" class="coordinates"></pre>

<script>
mapboxgl.accessToken = 'my.tkn';
var coordinates = document.getElementById('coordinates');
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [18.38 , 43.848],
zoom: 15
});

var marker = new mapboxgl.Marker({
draggable: true
})
.setLngLat([18.38 , 43.848])
.addTo(map);

function onDragEnd() {
var lngLat = marker.getLngLat();
coordinates.style.display = 'block';
coordinates.innerHTML =
'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;


}


marker.on('dragend', onDragEnd);
</script>


<form>
<input type="text" id="hvalue" name="hvalue">
<input type="text" id="wvalue" name="wvalue">
</form>

</body>
</html>

如果我理解正确的话，这就是你想要得到的:

-i重新定位脚本到表单下。-i addgetElementById().value =

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" />
</head>
<body>

<div id="map"></div>
<pre id="coordinates" class="coordinates"></pre>


<form>
<input type="text" id="hvalue" name="hvalue">
<input type="text" id="wvalue" name="wvalue">
</form>

<script>
mapboxgl.accessToken = 'my.tkn';
var coordinates = document.getElementById('coordinates');
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [18.38 , 43.848],
zoom: 15
});

var marker = new mapboxgl.Marker({
draggable: true
})
.setLngLat([18.38 , 43.848])
.addTo(map);

function onDragEnd() {
var lngLat = marker.getLngLat();
coordinates.style.display = 'block';
coordinates.innerHTML =
'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;

//im not sure which input needs to get which value, you can change if needed
document.getElementById('hvalue').value = lngLat.lng
document.getElementById('wvalue').value = lngLat.lat
}


marker.on('dragend', onDragEnd);
</script>
</body>
</html>

相关内容

最新更新

热门标签：