谷歌地图在 div 中不起作用 [英] Google Maps doesn't work when inside a div
问题描述
我正在尝试使用 Google Maps API，并且将包含地图的 div 仅在不在另一个 div 内时才有效.我用两张地图创建了一个小示例代码，第一个工作第二个没有.如果我删除这段代码的文档类型，两者都可以工作.任何想法为什么?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><头><meta name="viewport" content="initial-scale=1.0, user-scalable=no"/><meta content='application/xhtml+xml;charset=UTF-8' http-equiv='content-type'/><style type='text/css'>html { 高度:100% }身体{高度:100%；边距:0px；填充:0px }#map_canvas { 高度:50% }#map_canvas2 { 高度:50% }</风格><title>地图</title><script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script><script type='text/javascript'>函数初始化(){var latlng = new google.maps.LatLng(20, 20);var myOptions = {变焦:8，中心:latlng，mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);var map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);}<body onload='initialize()'><div id='map_canvas'></div><div><div id='map_canvas2'></div></html>
这是在 Firefox 和 Chrome 中的样子:
<小时>它确实有效，如果您在 firebug 中检查页面，您将看到正在创建地图.但是因为你没有应用到外层 div 的 CSS 定位，所以谷歌地图创建的地图 div 被定位在第一个 map_canvas 下
您需要定位和设置外部 div 的尺寸，尝试给外部 div 一个像素高度和像素宽度...
编辑
而不是:
<div><div id='map_canvas2'></div>
试试:
<div style="width:900px;height:900px;"><div id='map_canvas2'></div>您将看到地图正在工作...
I'm trying to use the Google Maps API and the div that is going to contain the map works only when not inside another div. I've created a little sample code with two maps, the first works the second doesn't. If I remove the doctype of this piece of code, both work. Any ideas why?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta content='application/xhtml+xml; charset=UTF-8' http-equiv='content-type' />
<style type='text/css'>
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 50% }
#map_canvas2 { height: 50% }
</style>
<title>Map</title>
<script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script>
<script type='text/javascript'>
function initialize() {
var latlng = new google.maps.LatLng(20, 20);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
}
</script>
</head>
<body onload='initialize()'>
<div id='map_canvas'></div>
<div>
<div id='map_canvas2'></div>
</div>
</body>
</html>
This is how it looks like in Firefox and Chrome:
It does work, If you inspect the page in firebug, you'll see that the map is being created. But because you have no CSS positioning applied to the outer div, the map div created by Google maps is positioned under the first map_canvas
You need to position and set the dimensions for the outer div, try by giving the outer div a pixel height and pixel width...
EDIT
instead of :
<div id='map_canvas'></div>
<div>
<div id='map_canvas2'></div>
</div>
try :
<!--<div id='map_canvas'></div>-->
<div style="width:900px;height:900px;">
<div id='map_canvas2'></div>
</div>
You will see the map is working...
这篇关于谷歌地图在 div 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
