неопределенная ошибка преобразования адреса в координаты с геокодером Mapbox - PullRequest
Новая
       51

неопределенная ошибка преобразования адреса в координаты с геокодером Mapbox

0 голосов
/ 20 февраля 2020

Я впервые работаю со службами геокодера Mapbox, и я пытался получить координаты (широту и долготу) в результате поиска адреса, и я сделал это, но когда я пытаюсь вставить этот результат в два ввода , поиск ввода изменить адрес, выбранный на «неопределенный», и я не знаю, почему. Я хочу координаты в два ввода, но также сохранить выбранный адрес в поиске ввода. Это изображение, которое показывает ошибку:

enter image description here

Это код, который я сейчас имею: 

mapboxgl.accessToken = 'pk.eyJ1IjoiY2FybWVuOTIiLCJhIjoiY2s2cGljM3ZzMW1udjNlbnkxZmMzdXJ3ZCJ9.HJQPFlX5VUh6wlS18R3bFw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40], // starting position
zoom: 9 // starting zoom
});
  var geocoder = new MapboxGeocoder({ // Initialize the geocoder
  accessToken: mapboxgl.accessToken, // Set the access token
  marker: {
    color: 'orange'
    },
  mapboxgl: mapboxgl // Set the mapbox-gl instance
  getItemValue: e => {
  document.getElementById('LocationLongitude_listingAdd').value = e['center'][0]; //long
  document.getElementById('LocationLatitude_listingAdd').value = e['center'][1]; //lat
  document.getElementsByClassName('mapboxgl-ctrl-geocoder--input').value = e['place_name']; //lat
    }
    
  });
document.getElementById('geocode_container').appendChild(geocoder.onAdd(map));
    #container_map{ position: relative; width: 100%; height: 400px;}
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; } 
.mapboxgl-ctrl-geocoder--input{min-width: 100%; width: 100%; border: 1px solid #DFE3E7 !important; border-radius: 0.267rem !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;}
 #map .mapboxgl-canvas-container canvas
    {
        width: 100% !important;
        height: 400px !important;
    }
.mapboxgl-ctrl-geocoder--input:focus{
    border-color: #5A8DEE !important;
    outline: 0 !important;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1) !important;
    }

.coordinates-result input { display: inline-block; }

    @media screen and (min-width: 640px)
    {
            .mapboxgl-ctrl-geocoder 
            {
                width: 100% !important;
                font-size: 12px;
                line-height: 20px;
                
            }
    }
    .mapboxgl-ctrl-geocoder, .mapboxgl-ctrl-geocoder .suggestions {
        box-shadow: none !important; 
    }
<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<!-- BEGIN: Head-->
<head>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" /></head>
<body>
<div id="map"></div>


<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js"></script>
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css" type="text/css" />
    <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>
</body>
</html>

Как я могу получить координаты результата поиска адреса в Mapbox и сохранить адрес и координаты на их входах, потому что я ' сохраню эти данные в базе данных.

1 Ответ

0 голосов
/ 20 февраля 2020

Согласно API документов https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#mapboxgeocoder

options.getItemValue Функция? Функция, которая определяет, как выбранный результат должен отображаться в строке поиска. Эта функция должна принимать один объект Carmen Geo JSON в качестве входных данных и возвращать строку. HTML теги в выходной строке не будут отображаться. По умолчанию (item) => item.place_name.

В вашем примере вы не смогли вернуть что-то из getItemValue, следовательно, он показывает undefined.

Однако, похоже, на самом деле вы просто хотите прослушать событие result https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on

geocoder.on('result', (e) => {
})

и не изменять формат предложений, как это делает getItemValue.

...