Javascript MapBox-如何在列表中选择地址后在div中显示lat和lng坐标_Javascript_Mapbox Gl Js

Javascript MapBox-如何在列表中选择地址后在div中显示lat和lng坐标

javascript

Javascript MapBox-如何在列表中选择地址后在div中显示lat和lng坐标,javascript,mapbox-gl-js,Javascript,Mapbox Gl Js,我在我的应用程序中使用MapBox，我想知道在我从显示在div中的列表中选择地址后，如何在div元素中显示lat和lng？我的参考是这个MapBox页面，但我没有找到使用javascript实现这一点的正确方法为了更清楚地解释我的疑问，以下是我在应用程序中使用的代码，如果可能的话，我希望在纬度和经度分区内显示lat和lng： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /

我在我的应用程序中使用MapBox，我想知道在我从显示在div中的列表中选择地址后，如何在div元素中显示lat和lng？我的参考是这个MapBox页面，但我没有找到使用javascript实现这一点的正确方法

为了更清楚地解释我的疑问，以下是我在应用程序中使用的代码，如果可能的话，我希望在纬度和经度分区内显示lat和lng：


<!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>

在这种情况下，我如何改进上面的代码，在选择geocoder div中的值后在div中显示纬度和经度信息？

如果我很了解您，您需要的基本是捕获geocoder中选择的结果，并在div中绘制结果的坐标。为此，您需要订阅结果事件

为此，您需要像这样添加事件侦听器，并在div的内部HTML中绘制结果：

地理编码器。关于“结果”，函数{ console.logr； document.getElementByIdcoords.innerHTML=r.result.center； } 我创建了一个

PS：如果此答案解决了您的问题，请将其标记为已接受答案，这样有助于其他用户了解正确的解决方案。

您需要演示您实际尝试了什么，以及您遇到了什么困难。这看起来像是我想要的，请写下我的代码。@SteveBennett，很抱歉。我无意强迫别人帮忙。我编辑了上面的代码，在选择geocoder div中的值后，我很难在div字段中显示纬度和经度。在这种情况下，我如何改进代码，在选择geocode div中的值后在div中显示这些信息？谢谢你的关注，再次表示歉意。你被哪一部分困住了？访问lat和long？或者在div中显示信息？@SteveBennett，在这种情况下，我希望在geocoder div中选择地址后在div中显示信息。在上面的代码中，我对纬度和经度div下的代码进行了注释。