javascript 如果坐标匹配map.getCenter()，或者满足其他一些条件，则编程打开Leaflet弹出窗口？

vuktfyat 于 2023-01-01 发布在 Java

关注(0)|答案(1)|浏览(136)

如果满足某些条件，我们如何使Leaflet打开特定标记的弹出窗口？我们希望编写一些内容，如果任何标记的位置匹配map.getCenter()，则应触发.openPopup()，但我们不知道如何触发.openPopup()或以其他方式设置将打开弹出窗口/工具提示的内容。
我们已经在Leaflet's docs中找到了onEachFeature，并对其进行了编码以识别我们想要的条件，但我们不知道如何从那里设置.openPopup()，因为feature.openPopup();不起作用。可以从onEachFeature中打开弹出窗口吗？
当条件满足时，可重现（例如，控制台日志记录）：

<!DOCTYPE html>
<style>
    html,body {margin: 0px;height: 100%;}
    body {display: flex;}
</style>

<body>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>

    <div id="mapid" style="flex: 1"></div>
    <script>var myMap = L.map("mapid");
        L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png').addTo(myMap);
        myMap.setView([20.2, -87.46], 11);

        var geojsonFeatureCollection =
        {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-87.8, 20.2]
                    },
                    "properties": {
                        "prop0": "non auto pop up text",
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-87.46, 20.2]
                    },
                    "properties": {
                        "prop0": "auto pop up text",
                    }
                }
            ]
        }

        function onEachFeature(feature, layer) {
            if (feature.geometry.coordinates[1].toFixed(5) == myMap.getCenter().lat.toFixed(5) &&
                feature.geometry.coordinates[0].toFixed(5) == myMap.getCenter().lng.toFixed(5)) 
            {console.log('something to make pop up open should happen here')}
        }

        L.geoJSON(geojsonFeatureCollection, {
            pointToLayer: function (feature, coordinates) {
                return L.marker(coordinates);
            }, onEachFeature: onEachFeature
        })
            .bindPopup((layer) => layer.feature.properties.prop0)
            .addTo(myMap)
            ;
    </script>
</body>

</html>

注意我们不想通过geojsonFeatureCollection中的条件打开标记的弹出窗口，因为我们不想不必要地把这个问题复杂化。我们只希望标记的弹出窗口在其他条件满足时打开，然后弹出窗口正常工作。这可以做到吗？

JavaScript

来源：https://stackoverflow.com/questions/74870683/programmatically-opening-a-leaflet-popup-if-its-coordinates-match-map-getcenter

1条答案

按热度按时间

zzzyeukh1#

问题是您试图在将弹出窗口添加到Map之前将其打开。
因此，解决方案是在onEachFeature函数中绑定弹出窗口，然后在图层添加到Map时打开弹出窗口：

function onEachFeature(feature, layer) {
    layer.bindPopup((layer) => layer.feature.properties.prop0)

    if (feature.geometry.coordinates[1].toFixed(5) == myMap.getCenter().lat.toFixed(5) &&
        feature.geometry.coordinates[0].toFixed(5) == myMap.getCenter().lng.toFixed(5))
    {
        layer.once('add',()=>{
            layer.openPopup();
        })
    }
}

L.geoJSON(geojsonFeatureCollection, {
    pointToLayer: function (feature, coordinates) {
        return L.marker(coordinates);
    }, 
    onEachFeature: onEachFeature
}).addTo(myMap);

赞(0）回复(0）举报 2023-01-01

我来回答

javascript 如果坐标匹配map.getCenter()，或者满足其他一些条件，则编程打开Leaflet弹出窗口？

1条答案

相关问题

热门标签

最新问答