在 Mapbox 点击标记上运行函数 // 在相对于 Mapbox 坐标的位置显示 SVG

Question

我正在为一个旅行预订网站创建一个交互式网站原型，这是第一次使用 mapbox。我已经在 mapbox 网站和其他地方进行了大量搜索，但有几件事我无法弄清楚：

第一个问题：当点击地图上的一个标记时，应该运行一个js函数来显示右边的窗格

我已经有这个来自 mapbox 的代码，它在点击时在每个标记上打开一个单独的弹出窗口（我稍后会删除这些弹出窗口）：

    // When a click event occurs near a place, open a popup at the location of
    // the feature, with description HTML from its properties.
    map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['places'] });

    if (!features.length) {
        return;
    }

    var feature = features[0];

    // Populate the popup and set its coordinates
    // based on the feature found.
    var popup = new mapboxgl.Popup()
        .setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.description)
        .addTo(map);
    });

根据该示例中的点击处理方式，我希望类似的方法能够奏效：

    feature.on('click', function (e) {
        **Insert code to display the pane here**
    });

但这不起作用。当您使用不熟悉的 api 时，很难弄清楚这些事情。所以我需要知道我会怎么做。

第二个问题：当用户点击查看城市中的热门旅行时，将运行一个 js 函数以在地图上显示 svg（来自 Illustrator 模型）

这里的问题是我需要 svg 显示在地图的某些坐标上，而不仅仅是屏幕上的某个位置。这个，我不知道从哪里开始。

感谢任何帮助，谢谢！

Answer 1

我不太了解您的“第一个问题”，但对于第二个问题，您可以使用标记在给定的纬度/经度处添加图像。见this example。

var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function() {
        window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el, {offset: [-marker.properties.iconSize[0] / 2, -marker.properties.iconSize[1] / 2]})
        .setLngLat(marker.geometry.coordinates)
        .addTo(map);

编辑

我从您的评论中看到，您希望图像在放大和缩小时保持与地图相同的比例。你想要一个Image source，而不是一个标记。

https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/

 "overlay": {
            "type": "image",
            "url": "https://www.mapbox.com/mapbox-gl-js/assets/radar.gif",
            "coordinates": [
                [-80.425, 46.437],
                [-71.516, 46.437],
                [-71.516, 37.936],
                [-80.425, 37.936]
            ]
        }

不过，它可能不支持 SVG。