javascript - Mapbox GL - 如何为复杂的弹出窗口设置通用样式

Question

我有一个带有许多标记的 Mapbox GL 地图。悬停时，应显示复杂的弹出窗口。我的问题是 - 我不想将这个复杂的代码复制到每个标记的描述中。理想情况下，我想在“布局”部分设置样式并且只调用参数。我已经将这种方法与图标标记一起使用。问题是我不知道布局部分中影响弹出窗口文本的参数名称是什么- 有人可以帮我吗？为了更好地理解，我附上了我的一段代码 - 可以看到参数的用法用于布局部分的图标图像

 map.addLayer({
                "id": "places",
                "type": "symbol",
                "source": {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [{
                            "type": "Feature",
                            "properties": {
                                "description": "<div class=\"mapbox_popisok\"><div class=\"trek_caption_header\"><strong><em>From Omalo to the Diklo fortress</em><br><br>Duration: </strong>4 hours<br><strong>Difficulty: </strong>Easy<br>blabla</div><div class=\"mapbox_wrapper\"></div><img class=\"obraztek\" src=\"OmaloDiklo_pr.jpg \" /></div>",
                                "icon": "yellow"
                            },
                            "geometry": {
                                "type": "Point",
                                "coordinates": [45.702117, 42.395926]
                            }
                        }, {
                            "type": "Feature",
                            "properties": {
                                "description": "<div class=\"mapbox_popisok\"><div class=\"trek_caption_header\"><strong><em>From Omalo to the Diklo fortress</em><br><br>Duration: </strong>4 hours<br><strong>Difficulty: </strong>Easy<br>blabla</div><div class=\"mapbox_wrapper\"></div><img class=\"obraztek\" src=\"OmaloDiklo_pr.jpg \" /></div>",
                                "icon": "yellow"
                            },
                            "geometry": {
                                "type": "Point",
                                "coordinates": [45.634342, 42.36961]
                            }
                        }]
                    }
                },
                "layout": {
                    "icon-image": "marker-{icon}",
                    "icon-allow-overlap": true,
                    "icon-size": 0.3,
                    "icon-offset": [0, -8],                        
                }

Answer 1

解决了。布局中没有特殊属性，但可以手动生成字符串，然后传递给 SetHtml 函数。像这样的东西...

map.on('mousemove', function (e) {
        var features = map.queryRenderedFeatures(e.point, { layers: ['places'] });
        // Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

        if (!features.length) {
            popup.remove();
            return;
        }

        var feature = features[0];
        var popupHtml = '<div class=\"mapbox_popisok\"><div class=\"trek_caption_header\"><strong><em>' + feature.properties.trekname + '</em><br><br>Duration: </strong>' + feature.properties.duration + '<br><strong>Difficulty: </strong>' + feature.properties.difficulty + '<br>' + feature.properties.description + '</div><div class=\"mapbox_wrapper\"></div><img class=\"obraztek\" src=\"../../Images/Thumbnails/Treks/nahlad/' + feature.properties.imagepath + ' \" /></div>';
        // Populate the popup and set its coordinates
        // based on the feature found.
        popup.setLngLat(feature.geometry.coordinates)
            .setHTML(popupHtml)
            .addTo(map);            
    })

Answer 2

你正在寻找text-field。下面是一个text-fieldin 用法的例子。