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

Question

My goal is to track my current position by smartphone and show this on the map. For this I'm using openlayers 2.

But now I have the following problem. When I use the below code in a Chrome Browser ( Desktop, Android ) it works fine. If I open the same page in a iPhone ( Safari, Chrome ) I got always instead of the map just a pink layer with the position marker.

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

Can someone help me here?

Answer 1

It might be due to mixed content, OpenLayers 2 defaults to http for the OSM url, try specifying 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"
            ]
));