ios移动设备上未显示的传单标记答案

【问题标题】：leaflet markers non shown on ios mobile deviceios移动设备上未显示的传单标记
【发布时间】：2018-05-18 14:49:52
【问题描述】：

我使用传单在我的网站上显示我的地理定位图片（您可以在此处查看我的测试站点：http://test.vincentbourganel.fr/pages/map-osm/）

一切都很好，除了一件事：当我从 ios 移动设备 (ios 11.3.1) 浏览我的网站时，没有显示任何标记。

我不知道问题出在哪里。

我尝试使用只有 2 个标记的 reduce 测试用例（仅 html，在 zenphoto 之外，用于我的画廊），但问题仍然存在。你可以在这里看到它：

http://test.vincentbourganel.fr/test_osm_map.html

你能给我指出解决这个问题的正确方向吗？

感谢您的帮助！！文森特

评论后编辑： 有我页面的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <script type="text/javascript" src="/zp-core/js/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.css" />
    <link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/zp_openstreetmap.css" />
    <script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.js"></script>
    <script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet-providers.js"></script>
    <title>[VB] Photo US | Map OSM</title>

</head>

<body>
    <h3>Map OSM</h3>
    <div id="osm_map" style="width:100%; height:600px;"></div>
    <script>
        var map = L.map('osm_map', {
            zoom: 4,
            zoomControl: false,
            minZoom: 2,
            maxZoom: 18
        });
        L.tileLayer.provider('OpenTopoMap').addTo(map);
        L.control.zoom({position: 'topleft'}).addTo(map);
        L.marker([57.150,-6.100]).addTo(map);
        L.marker([57.500,-6.450]).addTo(map);
        map.fitBounds([
            [57.150,-6.100], [57.500,-6.450]
        ]);
    </script>
</body>
</html>

【问题讨论】：

为了让我们帮助您编写代码，您需要共享代码......

标签： leaflet

【解决方案1】：

我的测试用例的代码可以在这里看到：http://test.vincentbourganel.fr/test_osm_map.html

我在我的 ios 移动设备上看不到这 2 个标记。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <script type="text/javascript" src="/zp-core/js/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.css" />
    <link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/zp_openstreetmap.css" />
    <script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.js"></script>
    <script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet-providers.js"></script>
    <title>[VB] Photo US | Map OSM</title>

</head>

<body>
    <h3>Map OSM</h3>
    <div id="osm_map" style="width:100%; height:600px;"></div>
    <script>
        var map = L.map('osm_map', {
            zoom: 4,
            zoomControl: false,
            minZoom: 2,
            maxZoom: 18
        });
        L.tileLayer.provider('OpenTopoMap').addTo(map);
        L.control.zoom({position: 'topleft'}).addTo(map);
        L.marker([57.150,-6.100]).addTo(map);
        L.marker([57.500,-6.450]).addTo(map);
        map.fitBounds([
            [57.150,-6.100], [57.500,-6.450]
        ]);
    </script>
</body>
</html>

【讨论】：

如果没有提供解决方案，您应该编辑您的问题以添加更多详细信息，而不是使用答案。跨度>
对不起，我会记住下一个问题。有什么方法可以帮助我吗？
感谢您将您的内容移至您的问题。抱歉，我目前没有 iOS 设备。如果您可以在 JSFiddle、Plunker 等服务上提供实时复制示例，而不是您自己的可以随时更改内容的服务器，这也会有所帮助，从而使您的帖子对未来的读者毫无用处。使用 Leaflet 的 CDN 版本。