gpt4 book ai didi

javascript - 谷歌地图不显示在 HTML
上?

转载 作者:太空宇宙 更新时间:2023-11-04 04:19:49 30 4
gpt4 key购买 nike

我正在尝试开发一个包含两个容器的网页。 mainmapdiv 覆盖整个页面,而 mainhomediv 位于 mainmapdiv 之上。我的目标是隐藏 mainhomediv 并在单击图像 (id=mapbutton) 时在 mainmapdiv 上显示 Google map 。代码如下:

<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mainmapdiv"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<script>
var map;
$(document).ready(function(){

//Click on button to display map
$('#mapbutton').click(function(){
$('#mainhomediv').fadeTo("slow",0);
$('#mainhomediv').css({opacity: 0});
initialize();
});

//Click on Home to get back home div
$('#home').click(function(){
$('#mainhomediv').fadeTo("slow",1);
$('#mainhomediv').css({opacity: 1});
});
});

HTML代码

<body>
<!--This is the primary container-->
<div id='#mainmapdiv' class='mainmapdiv'>
<div id='#mainhomediv' class='mainhomediv'>
.
//Somewhere in here there is an image with id='mapbutton'
.
.
</div>
</div>
</body>

现在当我点击图片时,mainhomediv 被完美隐藏,但是 map 没有显示在 mainmapdiv 上。

我导入了以下脚本:

<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/apijs?sensor=false"></script>

最佳答案

不知道这是否会解决,但你必须更正它:

您的 JS 链接有误:http://maps.googleapis.com/maps/apijs?sensor=false

你的 div ID 中有#:

<div id='#mainmapdiv' class='mainmapdiv'>
<div id='#mainhomediv' class='mainhomediv'>

您的脚本中有多个 var map;

关于javascript - 谷歌地图不显示在 HTML <div> 上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19293057/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com