MapBox - Как отобразить координаты широты и долготы внутри div после выбора адреса внутри списка - PullRequest
Новая
       27

MapBox - Как отобразить координаты широты и долготы внутри div после выбора адреса внутри списка

0 голосов
/ 06 августа 2020

Я использую MapBox в своем приложении и хотел бы знать, как я могу отобразить lat и lng внутри элемента div после выбора адреса из списка, который отображается внутри div? Моя ссылка - это страница 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 геокодера?

1 Ответ

1 голос
/ 07 августа 2020

Если я вас хорошо понимаю, вам нужно просто захватить результат, выбранный в геокодировщике, и нарисовать координаты результата в div. Для этого вам нужно подписаться на событие result.

Для этого вам нужно добавить прослушиватель событий, как этот, и нарисовать результат во внутреннем HTML div: 

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

Я создал скрипку о том, как подписаться на результат, выбранный в геокодере

введите описание изображения здесь

PS: Если этот ответ решает ваш вопрос, отметьте его как ответ принят , таким образом это поможет другим пользователям узнать правильное решение.

...