1

我正在使用MapBox JavaScript API并尝试在选项卡小部件上显示一些地图。一切正常，除了页面第一次加载时，地图没有加载。一旦我以某种方式（例如放大/缩小或拖动）与地图交互，这会导致所有地图图块加载。

<div class="g12" id="mapbox" style="display:none">
<div class="widget" id="widget_tabs" style="min-height:400px;">
    <h3 class="handle">http://www.mapbox.com/mapbox.js/example/v1.0.0/</h3>
    <div class="tab">
        <ul>
            <li><a href="#map-1">MapBox 1</a></li>
            <li><a href="#map-2">MapBox 2</a></li>
            <li><a href="#map-3">MapBox 3</a></li>
        </ul>            
        <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
        <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />

        <style>
            #map1 #map2 #map3 { position:absolute; }        
            #content {position: relative;}
        </style> 

        <script>
        $(document).ready(function() {
            mapbox.auto('map1', 'examples.map-zr0njcqy');
            mapbox.auto('map2', 'examples.map-zr0njcqy');
            mapbox.auto('map3', 'examples.map-zr0njcqy');

            $('#content').css({ height: 700});
            var x = $('#mapbox'); /* cache the selector */
            $('#map1,#map2,#map3').css({ width:  x.width() * .98 });
            $('#map1,#map2,#map3').css({ height: x.height() * .75});
        });             
        </script>

        <div id="map-1">                   
            <div id='map1'></div>  
        </div>    

        <div id="map-2">
            <div id='map2'></div>  
        </div>

        <div id="map-3">
            <div id='map3'></div>  
        </div>    

    </div> <!--end of class=tab-->
</div> <!--end of widget_tabs-->

如何修改此代码，以便在页面加载后强制地图正确加载？谢谢。

4

1 回答 1

0

OpenLayers 和 MapBox OpenLayers.org是一个开源的 JavaScript Web 地图库，有别于其他替代品，如 Leaflet 或 Google Maps API，因为它有大量的组件。

我花了周末时间通过将 OpenLayers 与 API（如 MapBox、WebGL 等）集成来创建示例应用程序……毕竟，OpenLayers 给我留下了深刻的印象——我计划在即将到来的 POC/项目中使用 OpenLayers。

这是我的测试工具的链接。您也可以从那里下载所有示例的代码。


最后...回答您的问题 :)定义初始化 JavaScript 函数：在下面的代码中，我定义了一个名为 initMap 的 JavaScript 函数，并在页面完成加载后由浏览器调用它来初始化地图。


<script>
function initMap() {
}    
</script>
//Modify the body opening tag and add an onload event attribute to it:

<body onload="initMap();"> </body>

        // Start - the actual code. See the test harness for working example
        OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
        function initMap(){
            var map = new OpenLayers.Map("map");
            var earth = new OpenLayers.Layer.XYZ(
                "Natural Earth",
                ["http://a.tiles.mapbox.com/v3/
                  mapbox.natural-earth-hypso-bathy/${z}/${x}/${y}.png",
                 "http://b.tiles.mapbox.com/v3/
                  mapbox.natural-earth-hypso-bathy/${z}/${x}/${y}.png",
                 "http://c.tiles.mapbox.com/v3/
                  mapbox.natural-earth-hypso-bathy/${z}/${x}/${y}.png",
                 "http://d.tiles.mapbox.com/v3/
                  mapbox.natural-earth-hypso-bathy/${z}/${x}/${y}.png"
                ],
                {
                  attribution: "Tiles &copy; <a href='http://mapbox.com/'>MapBox</a>",
                  sphericalMercator: true,
                  wrapDateLine: true,
                  numZoomLevels: 19
                 }
                 );
                  map.addLayer(earth);
                  map.setCenter(new OpenLayers.LonLat(105, 35).transform(
                  new OpenLayers.Projection("EPSG:4326"),
                  new OpenLayers.Projection("EPSG:900913")), 4);
                 }
于 2013-06-02T03:56:37.337 回答