Карта Recenter Mapbox с использованием пользовательских координат

Question

пытался в течение 1,5 часов. Может кто-нибудь помочь мне? «Похоже, что ваше сообщение содержит код, который неправильно отформатирован как код». Кто-нибудь может помочь мне отформатировать этот код? Теперь он работает в этом посте, но не при создании нового ... Теперь я не могу создать новый пост за день ... Что за ...

ИСПРАВЛЕНО: Похоже, чтовывод в браузере должен быть в макете кода.

Это был мой оригинальный вопрос:

НАЗВАНИЕ: Работа с API геолокации - вопрос области действия

Привет всем

Я работаю с Mapbox и пытаюсь обновить vars lngreal и latreal (по умолчанию Greenwhich координаты). Функция initializeMap () вызывается во время установки, и идея заключается в том, что она обновляет ее с помощью длинных координат пользователя, если это возможно. Когда я запускаю приведенный ниже код ...

function initializeMap() {

    mapboxgl.accessToken = 'HIDDEN FOR THIS POST';

    var lngreal = 0.0098;
    var latreal = 51.4934;

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(displayLocationInfo);

    }

    function displayLocationInfo(position) {
        //Why does this not work to update the map zoom?

        lngreal = position.coords.longitude;
        latreal = position.coords.latitude;
        console.log(lngreal);
        console.log(latreal);
    }

    console.log(lngreal);
    console.log(latreal);



    // This adds the map to your page

    var map = new mapboxgl.Map({
        // container id specified in the HTML

        container: 'map',
        // style URL

        style: 'mapbox://styles/mapbox/light-v10',
        // initial position in [lon, lat] format

        center: [lngreal, latreal],
        // initial zoom

        zoom: 14
    });

   // More code after this but not related

}

В html-консоли инспектора показывается следующее:

play-mapboxscripts.js:21 0.0098  
play-mapboxscripts.js:22 51.4934  
play-mapboxscripts.js:17 4.9212796  
play-mapboxscripts.js:18 52.333704999999995  

1. Почему сначала отображается последняя консоль.log строк вместо строк console.log в функции displayLocationInfo? Разве эта функция не вызывается в функции navigator.geolocation, которая предшествует этому?

2. Я не могу корректно обновить lngreal и latreal переменные в соответствии с местоположением пользователя. По умолчанию они вернутся к 0,0098 и 51,4934, и загруженная карта (карта вар) покажет местоположение по умолчанию Greenwhich. Связано ли это с переменной областью действия функции displayLocationInfo?

Answer 1

Сначала отображаются последние два журнала консоли, потому что displayLocationInfo является обратным вызовом асинхронного метода getCurrentPosition, поэтому ему нужно дождаться разрешения этого процесса, прежде чем он сможет записать новые координаты.

Комузаново добавьте на карту новые координаты, чтобы сделать что-то вроде этого:

function displayLocationInfo(position) {
  const { coords: { latitude, longitude } } = position;

  // Get a new lat/lng object
  // https://docs.mapbox.com/mapbox-gl-js/api/#lnglatlike
  const center = new mapboxgl.LngLat(latitude, longitude);

  // Center the map
  // https://docs.mapbox.com/mapbox-gl-js/api/#map#setcenter
  map.setCenter(center);
}

Answer 2

Спасибо Энди и @Chris G. Я не знал об асинхронных функциях и рад, что прочитал о них сейчас. Очень полезно.

У меня есть вопрос по поводу обратных вызовов, который относится к этой теме. Как функция узнает, что что-то является обратным вызовом;что-то, что должно быть выполнено после завершения определенного ввода-вывода. Откуда он знает, что он не должен выполняться сразу? Это определено в функции (стандартизированным) способом?

Насколько я знаю, ключевое слово 'callback', которое часто используется в аргументе, является обычной практикой, но оно не позволяет функции автоматически интерпретировать аргумент как нечто, что должно начинаться после завершения ввода-вывода. .

Принимая приведенный ниже пример, у меня есть три вопроса (взяты из https://medium.com/codebuddies/getting-to-know-asynchronous-javascript-callbacks-promises-and-async-await-17e0673281ee):

const request = require(‘request’);
function handleResponse(error, response, body){
    if(error){
        // Handle error.
    }
    else {
        // Successful, do something with the result.
    }
}
request('https://www.somepage.com', handleResponse);

1. Как выглядит структура функции 'require'что он знает, что аргумент 2 (в этом случае handleResponse) должен быть выполнен после завершения запроса? Я полагаю, это сводится к тому же вопросу, который я задавал выше.

2. Могут ли функции бытьасинхронный даже без ключевого слова async в функции? Если да, как браузер узнает, что это асинхронная функция?

3. В моем коде возможно ли, чтобы браузер / скрипт ждал свыполнение оставшегося кода до тех пор, пока navigator.geolocation.getCurrentPosition не завершит выполнение и, следовательно, не обновит действительные географические координаты?