将多个地图画布添加到窗口 - Google Maps JavaScript API v3 [英] Adding multiple map canvases to window - Google Maps Javascript API v3
本文介绍了将多个地图画布添加到窗口 - Google Maps JavaScript API v3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在一个窗口中显示多个Google地图画布，但它不起作用。在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>
如果有人能告诉我我做错了什么，那真是太棒了！
< a href =http://jsfiddle.net/q2yd2/2/ =nofollow noreferrer>工作小提琴
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）追加（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％;宽度：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 =routeContainerstyle =width：100％; height：100％;> < table style =width：100％; height：100％;> < tbody style =width：100％; height：100％;> < tr id =routeContainerTRstyle =width：100％; height：100％;>< / tr> < / tbody的> < / table>< / div>
I want to show multiple google map canvases in one window but it isnt working. The maps created in the for loop all just appear grey with nothing on them and I cant figure out why.
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>
If someone could tell me what Im doing wrong that would be awesome!
解决方案
- include the two mandatory options (zoom and center)
- create the DOM elements dynamically to avoid waiting for them to be created,
- give them a size.
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);
}
code snippet:
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
