Question

使用Mapbox API设置弹出窗口时，我遇到了一个问题。弹出窗口合并为一个巨大的块，该块长得很长。这是因为我将多个功能组合在一个位置上，并且正在全部选择它们。问题是我希望弹出窗口位于单独的窗口中，可以通过按一个按钮在这些窗口之间进行切换。

由于我使用JS的经验仅是基本知识，因此我对我的问题没有清楚的了解。我尝试了一些解决方案，并尝试通读了Mapbox网站上的文档，但无法解决此问题。但是，由于原始地图已经过时了几年，我必须让它开始工作，并且要替换它。

map.on('click', function (e) {
          var bbox = [
            [e.point.x - 2, e.point.y - 2],
            [e.point.x + 2, e.point.y + 2]
          ];
          var features = map.queryRenderedFeatures(bbox, {
            layers: ['2016-2018-crash-data']
          });
          var feature = features[0];

      var html = "";
      for (var f in features) {
        var feature = features[f];
        html += '<table id="popup_content" class="mdl-data-table"><center><h5>Accident Details</h5></center>' +
          '<td><strong> Year of Crash </strong></td>' +
          '<td>' + feature.properties.CRASH_YR + '</td></tr>' +
          '<tr><td><strong> Road </strong></td>' + '<td>' +
          feature.properties.ODPS_LOC_ROAD_NME + ' ' +
          feature.properties.ODPS_LOC_ROAD_SUFFIX_CD + ' ' +
          feature.properties.ODPS_LOC_ROUTE_PREFIX_CD + ' ' +
          feature.properties.ODPS_LOC_ROUTE_ID + '</td></tr>' +
          '<tr><td><strong> Light Conditions </strong></td>' + '<td>' +
          feature.properties.LIGHT_COND_PRIMARY_CD + '</td></tr>' +
          '<tr><td><strong> Crash Type </strong></td>' + '<td>' +
          feature.properties.CRASH_TYPE_CD + '</td></tr>' +
          '<tr><td><strong> Weather </strong></td>' + '<td>' +
          feature.properties.WEATHER_COND_CD + '</td></tr>' +
          '<tr><td><strong> Road Conditions </strong></td>' + '<td>' +
          feature.properties.ROAD_COND_PRIMARY_CD + ' ' +
          feature.properties.ROAD_COND_SECONDARY_CD + '</td></tr>' +
          '<tr><td><strong> Factors </strong></td>' + '<td>' +
          feature.properties.U1_CONT_CIR_PRIMARY_CD + '</td></tr>' +
          '<tr><td><strong> Vehicle Type </strong></td>' + '<td>' +
          feature.properties.U1_TYPE_OF_UNIT_CD + '</td></tr>' +
          '<tr><td><strong> Road Contour </strong></td>' + '<td>' +
          feature.properties.ROAD_CONTOUR_CD + '</td></tr>' +
          '<tr><td><strong> Serious Injuries </strong></td>' + '<td>' +
          feature.properties.ODPS_TOTAL_FATALITIES_NBR + '</td></tr>' +
          '<tr><td><strong> Fatalities </strong></td>' + '<td>' +
          feature.properties.INCAPAC_INJURIES_NBR + '</td></tr>';
      }
        var popup = new mapboxgl.Popup({
          offset: [0, 7]
        })

        .setLngLat(feature.geometry.coordinates)
        .setHTML(message + html + buttons)
        .addTo(map);
    });

这几乎是整个弹出代码。当前，它没有错误，并显示所有弹出窗口，仅显示在垂直的长列表中，就好像每个功能的弹出窗口都已附加到最后一个弹出窗口一样。

编辑：目前，我有多个相互重叠的数据点。当我单击该位置时，它将为该位置中的所有数据点生成一个弹出窗口。我希望它为每个数据点生成一个单独的弹出窗口，而不是一个弹出窗口。

这是当前的样子： Popup continues too far.

这是我想要的样子： Popup with buttons to sort through

Answer 1

从技术上讲，您想要的仍然只是一个弹出窗口。您正在正确使用Mapbox-GL-JS。您只需要找到一种使用某种分页控件而不是一个接一个地显示多个表的信息的方法。

Mapbox-GL-JS中没有类似的直接支持。您可能想使用带有插件（也许是https://pagination.js.org/）的某种框架（也许是jQuery）来实现该目的。

如何将Mapbox弹出窗口拆分为单独的框

1 个答案: