Javascript Openlayers 2通过Iphone显示粉色地图（图层）

我的目标是通过智能手机跟踪我当前的位置，并在地图上显示。为此，我使用openlayers 2

但现在我有以下问题。 当我在Chrome浏览器（桌面，Android）中使用下面的代码时，效果很好。如果我在iPhone（Safari，Chrome）上打开同一个页面，我得到的总是一个带位置标记的粉色图层，而不是地图

  <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> 

map=新的OpenLayers.map（“mapdiv”）；
addLayer（新的OpenLayers.Layer.OSM（））；
var lonLat=新OpenLayers.lonLat（-0.1279688,51.5077286）
.变换(
新OpenLayers.投影（“EPSG:4326”），//转换aus dem Koordinatensystem WGS 1984
map.getProjectionObject（）//在das Koordinatensystem“球形墨卡托投影”中
);
var=16；
var markers=新的OpenLayers.Layer.markers（“markers”）；
添加图层（标记）；
markers.addMarker（新OpenLayers.Marker（lonLat））；
map.setCenter（lonLat，zoom）；

---

有人能帮我吗？

这可能是由于内容混合，OpenLayers 2默认为OSM url的http，请尝试指定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"
            ]
));

---

我能够简单地测试它，现在显示地图。非常感谢。我最近注意到我的iphone正在ol2地图中渲染粉色瓷砖（并且在其他任何地方都可以使用）。然后我发现这也发生在我的开发服务器上。我很高兴能迅速解决我的愚蠢问题。三个文件、三行代码和三个ol2地图应用程序都在iphone上运行。我正在努力升级到ol6的网站似乎没有这个问题。（7年后？…我太老了…）