Географическое положение навигатора не устанавливает некоторые значения из-за асинхронной функции - PullRequest
Новая
       46

Географическое положение навигатора не устанавливает некоторые значения из-за асинхронной функции

0 голосов
/ 20 апреля 2019

У меня возникают некоторые проблемы с пониманием того, почему и как строка кода, которая выполняет функцию, которая устанавливает некоторые значения для mapOptions.center, не работает так, как я хочу.

Я понимаю асинхронное ожидание, поэтому, пожалуйста, не закрывайте этот вопрос, просто утверждая, что я должен просто изучить асинхронное ожидание.

Проблема в том, где эта строка:

navigator.geolocation.getCurrentPosition(setPosition);

выполняет рендеринг here из файла console.log выше и теоретически выполняет его при прохождении.

setPosition асинхронно и ожидает long и lat, а затем устанавливает значения mapOptions.center

Но когда доходит до строки, где говорится: loadUsers(map, mapOptions.center.lat, mapOptions.center.lng);

mapOptions.center не установлен. 

async function makeUsersMap(mapDiv) {
  if (!mapDiv) return;
  const loggedInUser = await getLoggedInUser()
  if (loggedInUser.username) {
    mapOptions.center = {
      lat: loggedInUser.username.location.coordinates[1],
      lng: loggedInUser.username.location.coordinates[0]
    }
  } else {
    const setPosition = async (position) => {
      const lat = await position.coords.latitude
      const lng = await position.coords.longitude
      mapOptions.center = {
        lat: lng,
        lng: lat
      }
    } 
    console.log('Here')
    navigator.geolocation.getCurrentPosition(setPosition);
  }

  // make our map
  const styledMapType = new google.maps.StyledMapType(mapStyles)
  const map = new google.maps.Map(mapDiv, mapOptions);
  map.mapTypes.set('styled_map', styledMapType);
  map.setMapTypeId('styled_map');

  // When it gets here the line `navigator.geolocation...` has not yet been fully executed, 
  // meaning mapOptions.center has not been set the the values of the navigator
  loadUsers(map, mapOptions.center.lat, mapOptions.center.lng);

  const input = $('[name="geolocate"]');
  const autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.addListener('place_changed', () => {
    const place = autocomplete.getPlace();
    loadUsers(map, place.geometry.location.lat(), place.geometry.location.lng());
  }, false);
}
...