MapBox-在列表中选择地址后如何在div中显示纬度和经度坐标 [英] MapBox - How to display lat and lng coordinates inside a div after select address inside a list
问题描述
我在应用程序上使用MapBox，我想知道在从div内显示的列表中选择一个地址后，如何在div元素内显示lat和lng?我的参考是此MapBox页面
PS:如果此答案解决了您的问题，请将其标记为已接受，这样可以帮助其他用户了解正确的解决方案.
I'm using MapBox on my application and i would like to know how can i display lat and lng inside div element after i select an address from a list that are display inside a div? My reference is this MapBox page https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-no-map/, but i didn't find a correct way to do that using javascript.
To explain more clearly my doubt, below are the code that i'm using on my application and i would like to display lat and lng inside "latitude" and "longitude" div's as below if is possible:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Use the geocoder without a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
type="text/css"
/>
<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<style>
#geocoder {
z-index: 1;
width: 100%;
text-align: center;
top: 20px;
}
.mapboxgl-ctrl-geocoder {
min-width: 100%;
}
</style>
<div id="geocoder"></div>
//How to display latitude and longitude inside div element below after select a value inside geocoder div above?
<div id="latitude">
<div id="longitude">
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiM3dzdG9yZSIsImEiOiJja2RoaWVlaGwyc2VxMnlwbWVrd2F2bmVoIn0.YNjkfQ-709GuxaE4vOjsxg';
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
types: 'country,region,place,postcode,locality,neighborhood'
});
geocoder.addTo('#geocoder');
</script>
</body>
</html>
In this case, how can i improve the code above to display latitude and longitude informations inside a div after select a value inside geocoder div?
If I'm understanding you well, what you want is basically capture the result selected in the geocoder and paint the coordinates of the result in a div. For that, you need to subscribe to the result event.
For that, you need to add the event listener like this, and there paint the result in the inner HTML of the div:
geocoder.on('result', function(r) {
console.log(r);
document.getElementById("coords").innerHTML = r.result.center;
})
I have created a fiddle on how to subscribe to result selected on geocoder
PS: If this answer solves your question, please mark it as answer accepted, in that way it will help other users to know is the right solution.
这篇关于MapBox-在列表中选择地址后如何在div中显示纬度和经度坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
