Google maps 页面加载后初始化MapBox映射_Google Maps_Dom_Mapbox

Google maps 页面加载后初始化MapBox映射

google-maps dom mapbox

Google maps 页面加载后初始化MapBox映射,google-maps,dom,mapbox,Google Maps,Dom,Mapbox,我正在使用并尝试在选项卡小部件上显示一些地图。一切都很正常，只是当页面第一次加载时，地图不会加载。只要我以某种方式（如放大/缩小或拖动）与地图交互，就会导致加载所有地图分幅 <div class="g12" id="mapbox" style="display:none"> <div class="widget" id="widget_tabs" style="min-height:400px;"> <h3 class="handle">http://

我正在使用并尝试在选项卡小部件上显示一些地图。一切都很正常，只是当页面第一次加载时，地图不会加载。只要我以某种方式（如放大/缩小或拖动）与地图交互，就会导致加载所有地图分幅

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

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

OpenLayers和MapBox是一个开源JavaScript web映射库，与其他替代方案（如传单或谷歌地图API）不同，因为它有大量的组件

我花了一个周末通过集成OpenLayers和API（如MapBox、WebGL等）来创建示例应用程序。。。说到底，我对OpenLayers印象深刻——我计划在即将到来的POC/项目中使用OpenLayers

这里有一个链接到我的。您还可以从那里下载所有示例的代码。

最后，回答您的问题：定义初始化JavaScript函数：在下面的代码中，我定义了一个名为initMap的JavaScript函数，并在页面加载完成后通过浏览器调用该函数来初始化映射

谢谢你的评论，但是你用的是谷歌地图，我用的是地图盒。是的，我的错。我有一些存档的MapBox文件，我将仔细查看并与您的实现进行比较。

<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);
                 }