Openlayers 2 显示粉色 map (layer) by Iphone

Question

我的目标是通过智能手机跟踪我当前的 position 并将其显示在 map 上。 为此，我使用的是 openlayers 2。

但现在我有以下问题。 当我在 Chrome 浏览器（桌面，Android ）中使用以下代码时，它工作正常。 如果我在 iPhone ( Safari, Chrome ) 中打开相同的页面，我总是得到一个带有 position 标记的粉红色层而不是 map。

  <div id="mapdiv"></div>
  <script src="OpenLayers.js"></script>
  
  <script>
  
    map = new OpenLayers.Map("mapdiv");

    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
              .transform(
                new OpenLayers.Projection("EPSG:4326"), // Transformation aus dem Koordinatensystem WGS 1984
                map.getProjectionObject() // in das Koordinatensystem 'Spherical Mercator Projection'
              );

    var zoom=16;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    
    markers.addMarker(new OpenLayers.Marker(lonLat));
    
    map.setCenter (lonLat, zoom);
    
  </script> 

有人可以在这里帮助我吗？

Answer 1

这可能是由于混合内容，OpenLayers 2 默认为 http 对于 OSM url，尝试指定 https

map.addLayer(new OpenLayers.Layer.OSM(
            "OpenStreetMap", [
                "https://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
                "https://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
                "https://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
            ]
));