Question

我正在使用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-->

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

Answer 1

OpenLayers和MapBox OpenLayers.org是一个开源JavaScript网页映射库，与其他替代方案（如Leaflet或Google Maps API）区别开来，因为它有大量的组件。

我花了周末创建示例应用程序，将OpenLayers与API集成在一起，如MapBox，WebGL等......毕竟说完了，我对OpenLayers印象非常深刻 - 我计划在即将到来的POC中使用OpenLayers /项目。

这是我的test harness的链接。从那里你也可以下载所有例子的代码。

最后......回答你的问题：） 定义初始化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);
                 }

页面加载后初始化MapBox贴图

1 个答案: