Question

我想在一个窗口中显示多个谷歌地图画布，但它不起作用。在for循环中创建的地图都显示为灰色，没有任何内容，我无法弄清楚原因。

HTML

 <div id="routeContainer">
   <table>
      <tr id="routeContainerTR">

      </tr>
   </table>    
 </div>

Jquery的/使用Javascript

  <script type="text/javascript">
    var margin = 50;
    var maps = [];
      for (var i = 0; i < 5; i++) {
         $("#routeContainer").append("<td><div style='margin-left: " + margin + "px;' class = 'test'>hello world<div style='width:100%; height:100%; float:left;' id='map-canvas" + i + "'></div></div></td>");
            var mapOptions = {
                zoom: 10,
                scrollwheel: false

              };
              maps[i] = new google.maps.Map(document.getElementById('map-canvas'+i),mapOptions);
      };

  </script>

如果有人能告诉我，我做错了什么会很棒！

Answer 1

使用Google地图Javascript API创建地图需要

center属性，将center添加到您的mapOptions，它会正常工作。

Answer 2

包含两个必选项（缩放和中心）
动态创建DOM元素以避免等待创建它们，
给他们一个大小。

working fiddle

var margin = 50;
var maps = [];
for (var i = 0; i < 5; i++) {
    var tableCell = document.createElement("td");
    tableCell.setAttribute("style", "height:100% width:100%");
    var newMapCont = document.createElement("div");
    newMapCont.setAttribute("style", "margin-left: " + margin + "px; height:100% width:100%");
    newMapCont.setAttribute("class", 'test');
    var newMap = document.createElement("div");
    newMap.setAttribute("id", "map-canvas" + i);
    newMap.setAttribute("style", "width:500px; height:500px; float:left;");
    newMapCont.appendChild(newMap);
    tableCell.appendChild(newMapCont);

    $("#routeContainerTR").append(tableCell);
    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(i, i),
        scrollwheel: false

    };
    maps[i] = new google.maps.Map(newMap, mapOptions);
}

代码段

function initialize() {
  var margin = 50;
  var maps = [];
  for (var i = 0; i < 5; i++) {
    var tableCell = document.createElement("td");
    tableCell.setAttribute("style", "height:100% width:100%");
    var newMapCont = document.createElement("div");
    newMapCont.setAttribute("style", "margin-left: " + margin + "px; height:100% width:100%");
    newMapCont.setAttribute("class", 'test');
    var newMap = document.createElement("div");
    newMap.setAttribute("id", "map-canvas" + i);
    newMap.setAttribute("style", "width:500px; height:500px; float:left;");
    newMapCont.appendChild(newMap);
    tableCell.appendChild(newMapCont);

    $("#routeContainerTR").append(tableCell);
    var mapOptions = {
      zoom: 10,
      center: new google.maps.LatLng(i, i),
      scrollwheel: false

    };
    maps[i] = new google.maps.Map(newMap, mapOptions);
    createMarker(mapOptions.center, mapOptions.center.toUrlValue(6), maps[i]);
  }
}

function createMarker(latlng, title, map) {
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: title
  });
  var infowindow = new google.maps.InfoWindow();
  google.maps.event.addListener(marker, 'click', function(e) {
    infowindow.setContent(title);
    infowindow.open(map, marker);
  });
  google.maps.event.trigger(marker, 'click');
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  border: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
<div id="routeContainer" style="width:100%; height: 100%;">
  <table style="width:100%; height: 100%;">
    <tbody style="width:100%; height: 100%;">
      <tr id="routeContainerTR" style="width:100%; height: 100%;"></tr>
    </tbody>
  </table>
</div>

将多个地图画布添加到窗口 - Google Maps Javascript API v3

2 个答案: