Question

这里我有3个不同的div，我需要的是加载三个地图。我的javascript看起来像

function initialize() {
var map_canvas1 = document.getElementById('map_canvas1');
var map_canvas2 = document.getElementById('map_canvas2');
var map_canvas3 = document.getElementById('map_canvas3');

var map_options1 = {
  center: new google.maps.LatLng(44.5403, -78.5463),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map_options2 = {
  center: new google.maps.LatLng(44.5403, -78.5463),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};

var map_options3 = {
  center: new google.maps.LatLng(44.5403, -78.5463),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.TERRAIN 
};
var map1 = new google.maps.Map(map_canvas1, map_options1);
var map2 = new google.maps.Map(map_canvas2, map_options2);
var map3 = new google.maps.Map(map_canvas3, map_options3);

}

google.maps.event.addDomListener（窗口，＆＃39;加载＆＃39;，初始化）;

我的HTML正文看起来像

      <body>
        <div id="tabs">
            <ul>
                <li><a href="#map_canvas1">First</a></li>
                <li><a href="#map_canvas2">Second</a></li>
                <li><a href="#map_canvas3">Third</a></li>
            </ul>
            <div id="map_canvas1" class="map_canvas">
            </div>
            <div id="map_canvas2" class="map_canvas">
            </div>
            <div id="map_canvas3" class="map_canvas">
            </div>
        </div>
    </body>

我的风格

.map_canvas {
  height: 600px;
}

但第二和第三张地图无法正确显示。 First Tab Second Tab Third Tab

Answer 1

当我遇到这个问题时，我通常会通过添加

来解决这个问题

google.maps.event.trigger(map, 'resize');

这会将地图放回全宽和高度。

Answer 2

我对此进行了测试，我改变它的唯一方法就是在.map_canvas类中定义宽度！ .map_canvas {width：800px; height：600px; }

如何同时将三个不同的地图加载到不同的视图？

2 个答案: