MapBox - 如何在列表中选择地址后在 div 中显示纬度和经度坐标

Question

我在我的应用程序上使用 MapBox，我想知道在从 div 内显示的列表中选择地址后如何在 div 元素内显示 lat 和 lng？我的参考是这个MapBox页面https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-no-map/，但我没有找到正确的方法来使用JavaScript。

为了更清楚地解释我的疑问，下面是我在应用程序中使用的代码，如果可能的话，我想在“纬度”和“经度”div 中显示纬度和经度，如下所示：


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

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

Answer 1

如果我很理解你的话，你想要的基本上是捕获在地理编码器中选择的结果并在 div 中绘制结果的坐标。为此，您需要订阅

result

事件。

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

    geocoder.on('result', function(r) {
      console.log(r);
      document.getElementById("coords").innerHTML = r.result.center;
    })

我创建了一个关于如何订阅在地理编码器上选择的结果的小提琴

PS：如果这个答案解决了您的问题，请将其标记为接受答案，这样可以帮助其他用户知道这是正确的解决方案。

MapBox - 如何在列表中选择地址后在 div 中显示纬度和经度坐标

问题描述投票：0回答：1

1个回答

最新问题

MapBox - 如何在列表中选择地址后在 div 中显示纬度和经度坐标

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1