向窗口添加多个地图画布 - Google Maps Javascript API v3 [英] Adding multiple map canvases to window - Google Maps Javascript API v3
本文介绍了向窗口添加多个地图画布 - Google Maps Javascript API v3的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在一个窗口中显示多个谷歌地图画布,但它不起作用.在 for 循环中创建的地图全部显示为灰色,上面没有任何内容,我不知道为什么.
HTML
<表格><tr id="routeContainerTR"></tr>
Jquery/Javascript
如果有人能告诉我我做错了什么,那就太棒了!
解决方案
- 包括两个强制性选项(缩放和居中)
- 动态创建 DOM 元素以避免等待它们被创建,
- 给它们一个尺寸.
var margin = 50;var 地图 = [];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 = {缩放:10,中心:新的 google.maps.LatLng(i, i),滚轮:假};地图[i] = new google.maps.Map(newMap, mapOptions);}
代码片段:
function initialize() {无功保证金 = 50;var 地图 = [];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 = {缩放:10,中心:新的 google.maps.LatLng(i, i),滚轮:假};地图[i] = new google.maps.Map(newMap, mapOptions);createMarker(mapOptions.center, mapOptions.center.toUrlValue(6), maps[i]);}}函数 createMarker(纬度,标题,地图){var 标记 = 新的 google.maps.Marker({位置:latlng,地图:地图,标题:标题});var infowindow = new google.maps.InfoWindow();google.maps.event.addListener(marker, 'click', function(e) {infowindow.setContent(title);infowindow.open(地图,标记);});google.maps.event.trigger(marker, 'click');}google.maps.event.addDomListener(window, 'load', initialize);
html,身体 {高度:100%;宽度:100%;边距:0px;填充:0px;边框: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>
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屋!
查看全文