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

问题描述

使用 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 持续得太远了。

这是我希望它看起来的样子：带有按钮的弹出窗口以进行排序

标签： mapboxmapbox-gl-js

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

问题描述

解决方案

推荐阅读