Mapbox有时不加载标记

Question

我正在使用Mapbox，在我的本地主机中，它总是正确加载我的标记。然而，现在我部署了我的应用程序，它没有。

至少有时候，

我注意到，如果我加载页面，然后就在页面加载之前，我切换到另一个选项卡，然后等待5秒钟，然后回到我的应用所在的选项卡。它确实工作并加载标记。

此外，我得到的错误：源用户不存在于地图的样式中。当我试图设置一个功能状态（当你悬停在侧边栏项目上，在标记没有加载的情况下）：map.setFeatureState（{Source：'user'， id： i}，{hover： true}）

我还注意到映射。on（'load'，fn）在标记未加载时不触发，因为如果我添加控制台。将日志记录在其中。。。它不会被记录（当标记未加载时）

所以源代码没有加载。。。

所以，我猜这是某种类型的异步问题，或者是map的问题。on（'load'，fn）可能会遇到某些竞争条件：https://github.com/mapbox/mapbox-gl-js/issues/6707.

这就是为什么当我给它一些时间，通过去另一个标签，然后回来，它工作。

但是我想不出解决办法。

我有这个loadUser函数，它对我的后端进行API调用，获取用户，然后调用map.on（'load'， fn）

当我得到用户时，我使用等待：

     const res = await axios.get(`${apiUrl}?lat=${lat}&lng=${lng}`)
     const users = res.data;
     ...

有人知道问题在哪里吗？为什么我的标记没有加载？

我的现场直播在这里：https://jamsesssion.com/

如果您检查并搜索文件：usersMap，您可以在那里看到代码。在chrome控制台中按cmd p并搜索文件。

这是代码：

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'
                ],
              }
          });
}

Answer 1

您可能需要放置地图。在（‘加载’…） loadUsers函数之外执行code>request，以便映射等待loadUsers请求完成。您还可以创建一个单独的函数来添加也等待loadUsers请求的源和层。所以它可能看起来像：

map。on（'load'，function（）{loadUsers（addSources）}）