Я использую Mapbox и на моем локальном хосте он всегда корректно загружает мои маркеры. Однако теперь, когда я развернул свое приложение, оно не стало.
Хотя бы иногда
Я заметил, что если я загружаю страницу, а затем непосредственно перед загрузкой страницы, я переключаюсь на другую вкладку и затем жду 5 секунд, а затем возвращаюсь на вкладку, где находится мое приложение. Он работает и загружает маркеры.
Кроме того, я получаю сообщение об ошибке: The source 'users' does not exist in the map's style. при попытке установить состояние объекта (при наведении курсора на элементы боковой панели в случае, если маркеры не загружались):
map.setFeatureState({source: 'users', id: i}, { hover: true})
Я также заметил, что map.on('load', fn) не запускается, когда маркеры не загружены, потому что, если я добавлю console.log внутри него ... он не будет зарегистрирован (когда маркеры не загружаются)
То есть источник не загружен ...
Итак, я предполагаю, что это какой-то тип асинхронной проблемы, или, возможно, проблема с map.on('load', fn) может страдать из-за состояния гонки: https://github.com/mapbox/mapbox-gl-js/issues/6707.
Вот почему, когда я даю это время, перехожу на другую вкладку и затем возвращаюсь, это работает.
Но я не могу придумать решение.
У меня есть эта функция loadUsers, которая выполняет вызов API для моего бэкэнда, получает пользователей, а затем вызывает map.on('load', fn)
И я жду, когда получу пользователей:
const res = await axios.get(`${apiUrl}?lat=${lat}&lng=${lng}`)
const users = res.data;
...
Кто-нибудь может увидеть, где проблема? почему мои маркеры не загружаются?
Мой сайт в прямом эфире здесь: https://jamsesssion.com/
Вы можете увидеть код там, если вы проверяете и ищете файл: usersMap.js, нажав cmd + p в консоли chrome и выполнив поиск файла.
А это код:
async function loadUsers(map, lat = 52.5, lng = 13.4, apiUrl = `/api/users/near?lat=${lat}&lng=${lng}`) {
const res = await axios.get(`${apiUrl}?lat=${lat}&lng=${lng}`)
const users = res.data;
if (!users.length) {
alert('Oooops! \n\nThere are no registered users in the place you searched yet, If you live there, register to Jamsession and tell your friends!');
return;
}
const geoJsonMarkers = users.map( (place, i ) => {
const [placeLng, placeLat] = place.location.coordinates;
const position = { lat: placeLat, lng: placeLng };
return {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [position.lng, position.lat]
},
'id': i,
'properties': {
'name': place.name,
'genres': place.genres,
'photo': place.photo,
'slug': place.slug,
}
}
})
let markers = { 'features': geoJsonMarkers }
map.on('load', function() {
map.addSource('users', {
type: "geojson",
data: markers,
cluster: true,
clusterMaxZoom: 22,
clusterRadius: 50,
})
map.addLayer({
id: "singles",
type: "circle",
source: "users",
filter: ["!has", "point_count"],
paint: {
'circle-radius': {
'base': 10,
'stops': [[5, 20], [13, 50], [14, 60]]
},
// 'circle-color': '#ddffc8',
'circle-color': ["case",
["boolean", ["feature-state", "hover"], false],
'#ff4da6',
'#ddffc8'
],
}
});
}