Leaflet 弹出窗口在 Safari 中无法打开？这是解决方法

Leaflet 弹出窗口在 Safari 中的常见问题及其解决方法

问题：Leaflet 弹出窗口在 Safari 13.1.3 中无法打开

如果你正在使用 Leaflet 库为地图中的标记添加弹出窗口，却发现它们在 Safari 13.1.3 中无法打开，那么你不是一个人。这是由于一个浏览器兼容性问题，弹出窗口在 Safari 13.1.3 中无法加载。

解决方法

虽然我们无法直接解决浏览器兼容性问题，但我们可以采用以下替代方案：

1. 检测浏览器版本： 在代码中添加检测浏览器版本的逻辑。如果检测到是 Safari 13.1.3，则采用替代解决方案。

2. 使用原生 DOM 事件： 对于 Safari 13.1.3，可以使用原生 DOM 事件监听标记点击。在点击标记时，手动触发弹出窗口的打开。

修改后的代码示例：

function populateLeaflet(data){
        let json = JSON.parse(data);
        map.flyTo([json[0]['lat'],json[0]['lng']], 12);
        json.forEach(element =>
            L.marker([element['lat'], element['lng']]).bindPopup(element['title']).addTo(map)
            .on('click', function(e) {
                this.openPopup();
            })
            )
    }

3. 升级 Safari 版本： 另一个选择是升级到 Safari 的最新版本。这可能会解决弹出窗口问题，因为较新版本的浏览器通常解决了以前的兼容性问题。

结论

通过检测浏览器版本并使用原生 DOM 事件监听，我们可以解决 Leaflet 弹出窗口在 Safari 13.1.3 中无法打开的问题。我们希望这个解决方案对你有帮助，让你的 Leaflet 地图应用程序在所有浏览器中都能正常工作。

常见问题解答

1. 这个问题只发生在 Safari 13.1.3 吗？

   是的，这个问题只发生在 Safari 13.1.3。

2. 这个解决方法适用于所有 Leaflet 版本吗？

   是的，这个解决方法适用于所有 Leaflet 版本。

3. 如果我不想使用原生 DOM 事件怎么办？

   如果你不想使用原生 DOM 事件，你可以升级到 Safari 的最新版本，这可能会解决问题。

4. 我还能做些什么来确保 Leaflet 地图应用程序在所有浏览器中都能正常工作？

   你可以定期测试你的应用程序以确保兼容性，并在新版本的浏览器发布时升级到最新版本。

5. 我还可以从哪里获得有关 Leaflet 的帮助？

   你可以查看 Leaflet 文档、加入 Leaflet 用户组或在 Stack Overflow 上发帖。