我正在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);
});
使用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;
}
}
调整所需的任何设置,以使弹出窗口较小。我在墨尔本的时髦地图上使用这种方法 - 使用一个很小的浏览器窗口尝试一下,看看弹出窗口如何收缩。