Question

我想使用分组类在同一页面上使用1个初始化函数加载2个谷歌地图。但地图没有加载。有人可以帮忙吗？这是我的代码：

<!DOCTYPE html>
<html>
 <script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?v=3.exp">
        </script>
        <script>
 function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };

  var map = new google.maps.Map(document.getElementsByClassName('map-canvas'),
      mapOptions);
}
</script>
<body>

<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;" >
<script>
initialize();       
//google.maps.event.addDomListener(window,'load',initialize);
</script>
</div><!-- /.panel-body -->

<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;" >
<script>
initialize();       
//google.maps.event.addDomListener(window,'load',initialize);
</script>
</div><!-- /.panel-body -->


                                        </body>
                                        </html>

Answer 1

好的，你的来源有一些市长问题：

HTML结构无效

您的脚本必须放在head标记上方的body标记中，如：

<head>
    <title></title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp">
    </script>

    <script>
        var map;
        var map2;
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644)
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);
            map2 = new google.maps.Map(document.getElementById('map-canvas2'),
                mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>    
</head>

您无法按容器类名称初始化Google地图。所有容器都必须是独一无二的。正如您所看到的，我正在创建2个单独的地图'map and map2`，因此我需要在body标签中使用两个单独的容器，如：
```
<div id="map-canvas"></div>
<div id="map-canvas2"></div>
```
您不必在body标签中调用initialize函数，因为它将通过窗口上的eventListener调用 - load
```
google.maps.event.addDomListener(window, 'load', initialize);
```

所以我们把它们放在一起： FIDDLE

Answer 2

getElementsByClassName返回元素数组
一旦文件onload事件被触发，你需要运行初始化函数。

＆＃13;

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  elems = document.getElementsByClassName('map-canvas');
  for (var i = 0; i < elems.length; i++) {
    var map = new google.maps.Map(elems[i],
      mapOptions);
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;">
</div>
<!-- /.panel-body -->

<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;">
  <script>
    initialize();
     //google.maps.event.addDomListener(window,'load',initialize);
  </script>
</div>
<!-- /.panel-body -->

＆＃13;

使用相同的初始化函数加载2个谷歌地图

2 个答案: