Openlayers 2 显示粉红色地图（层）Iphone

Question

我的目标是通过智能手机跟踪我当前的位置并将其显示在地图上。为此，我正在使用 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>

有人可以帮我吗？

Answer 1

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

Openlayers 2 显示粉红色地图（层）Iphone

Openlayers 2 show pink map (layer) by Iphone

html

javascript

openlayers