所以我正在为期末项目(高中)制作这个网站,我正在使用
<script>
function carregaPagina($link){
$( "#destaques" ).load( $link );
}
</script>
将页面加载到div中,这样每次单击菜单上的链接都不会刷新整个页面。HTML如下所示:
<li>
<a href="#" onClick="carregaPagina('contactos.php');">CONTACTOS</a>
</li>
(只是一个例子)。
现在,我想在联系人页面上的灯箱中插入一个谷歌地图,这样它就会显示地址,如果用户愿意,可以点击查看地图。我用这个教程来获取地图。我试着把它放在联系人页面里,就像这个一样
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
如果我单独加载页面,但如果我使用代码加载页面,或者如果我把它放在一个灯箱里,它就不起作用,比如:
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content"><div id="map-canvas"></div> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>
我在Stackoverflow的某个地方找到了灯箱。有人能帮我吗?
p.S.:对不起我的英语。通过查看我的代码,您可能已经注意到,它不是我的母语
与其使用加载,为什么不在灯箱中使用iframe,因为它将加载包含全幅地图的页面
样品:
<div id="light" class="white_content">
<iframe height="300" width="300" src="map_page.php"></iframe>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>