我想在移动设备上查看时在地图框标记上弹出响应

Question

我正在 mapbox 上制作地图，其中包含从数据集中导入的标记。标记有一个弹出窗口，在桌面上完美运行，但在移动设备上查看时，它会从屏幕边缘溢出。下面是我用来创建这个弹出窗口的代码。切换到移动设备时如何使弹出窗口更改大小或根据显示屏调整大小？

map.on('click', function(e) {
      var features = map.queryRenderedFeatures(e.point, {
        layers: ['American Eats'] // replace this with the name of the layer
      });
      if (!features.length) {
        return;
      }
      var feature = features[0];
      var popup = new mapboxgl.Popup({ offset: [0, -15] })
        .setLngLat(feature.geometry.coordinates)
        .setHTML('<h3>' + feature.properties.Title + '</h3><h4>' + feature.properties.Adress + '</h4><p>' + feature.properties.Description + '</p>')
        .setLngLat(feature.geometry.coordinates)
        .addTo(map);
    });

Answer 1

使用 CSS 很容易做到这一点。沿着这些线的东西：

@media only screen and (max-width: 480px) {
    .mapboxgl-popup-content {
        max-width: 250px;
    }
    .mapboxgl-popup-content div {
        padding:0em;
    }
    .mapboxgl-popup-content p {
        margin: 0.5em 0.5em;
    }
}

调整您需要的任何设置以保持弹出窗口较小。我在 Hipster Map of Melbourne 使用这种方法 - 在非常小的浏览器 window 上尝试一下，看看弹出窗口如何缩小。

我想在移动设备上查看时在地图框标记上弹出响应

I want to make a pop-up on a mapbox marker responsive when veiwing on mobile devices

popup

mapbox

mapbox-gl-js