MapBox - How to display lat and lng coordinates inside a div after select address inside a list
Question
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?
1 answers
solution1
1 ACCPTED 2020-08-07 18:22:40
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.