Question

我目前正在尝试将Magnific Popup与Mapbox GL JS一起使用。我想从地图上的弹出窗口中启动Magnific Popup div。我已经编写了代码，尽管看上去（至少对我的业余爱好者而言）没有错误，但是Magnific Popup div不会启动。

我尝试将Magnific Popup“ open-popup-link”类作为字符串插入GEOJSON文件中，并在JavaScript中进行引用，并且尝试将其作为文本字符串直接输入JavaScript变量中，但是尽管它们都导致相同的代码，但弹出窗口仍然无法启动。作为测试，我将要启动的Magnific Popup div绑定到与Mapbox不相关的页面中的一个div，它可以完美启动（与Mapbox不相关的页面上的所有其他Magnific Pop div也可以正常运行）。

代码如下：

map.addLayer({
    "id": "photos",
    "type": "symbol",
    "source": {
    "type": "geojson",
    "data": {
    "type": "FeatureCollection",
    "features": [{
    "type": "Feature",
    "properties": {
    "image": "1-1851_Telegraph Hill_small.jpg",
    "divid": "PPPP-popup-1",
    "hrefdiv": "#PPPP_photo_1",
    "descriptionstart": "<strong>San Francisco, Taken from the Western Hill</strong><p>View of San Francisco, Taken from the Western Hill at the foot of Telegraph Hill, looking toward Ringon Point and Mission Valley. lith. of Sarony & Major., Date: c.1851</p><div id=\"",
    "descriptionmiddle": "\" href=\"",
    "icon": "attraction"
    },
    "geometry": {
    "type": "Point",
    "coordinates": [-122.417169, 37.796504]
    }
    }, {
    "type": "Feature",
    "properties": {
    "image": "11-1865_Embarcadero St at Broadway looking at Telegraph Hill.jpg",
    "divid": "PPPP-popup-11",
    "hrefdiv": "#PPPP_photo_11",
    "descriptionstart": "<strong>Telegraph Hill</strong><p>Embarcadero at Green St, Date: 1865</p><div id=\"",
    "descriptionmiddle": "\" href=\"",
    "icon": "attraction"
    },
    "geometry": {
    "type": "Point",
    "coordinates": [-122.399191, 37.800499]
    }
    }]
    }
    },
    "layout": {
    "icon-image": "{icon}-15",
    "icon-allow-overlap": true
        }
        });

        map.on('click', 'photos', function (e) {
        var coordinates = e.features[0].geometry.coordinates.slice();
        var description_with_image = '<img src="' + e.features[0].properties.image + '">' + e.features[0].properties.descriptionstart + e.features[0].properties.divid + e.features[0].properties.descriptionmiddle + e.features[0].properties.hrefdiv + '" class="open-popup-link">See more on the Past, Present, and Future of this location</div>'

        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }

        new mapboxgl.Popup()
        .setLngLat(coordinates)
        .setHTML(description_with_image)
        .addTo(map);
        });

我没有收到任何错误消息，只是单击链接时什么都没有发生。我是Mapbox GL JS的新手，我想知道问题是否可能是因为mapbox GL JS不喜欢书签，只喜欢外部HTML链接吗？任何人都可以就是否可行以及如果可行的话提供一些建议吗？

非常感谢您的帮助，谢谢。

Magnific Popup是否与Mapbox GL JS兼容？

0 个答案: