这个问题是特定于设计的。我有一个在 map 上显示位置的应用程序，一切正常。但现在我需要设计用户界面，即超出 map (按钮、表单等)这些将位于 map 的一侧，但无论出于何种原因 map 一旦更改某些 CSS 页面就会显示。
我有点绝望，因为我自己的 CSS、bootstrap (2.3.0)、foundation (3.2.5) 都不起作用。 map 根本没有显示，在控制台中没有错误。在更好的情况下， map 会显示，但会出现图形故障(缩放控件困惑、标记位置错误等)，这可能会发生，我该如何解决这个问题。我必须使用 iframe 吗？还是有更好的解决方案？
我读过有关 max-width: none 的修复，但这并没有解决任何问题。澄清一下，我使用的 map 不是静态的。
如果尝试使用简单的标记和样式，我可以完美地制作 map
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="/css/styles.css" media="all">
</head>
<body>
<div id="map" class="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
<script src="/js/app.js"></script>
</body>
</html>
样式.css
html, body, .map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
应用程序.js
google.maps.event.addDomListener(window, 'load', function() {
options = {
zoom: 15,
center: new google.maps.LatLng(10.472937,-73.262308),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
});
但显然它不足以构建应用程序。
最佳答案
包括使用 iframe 的解决方案，因为这似乎是 map 不受其余 CSS 影响的唯一方法
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3"></div>
<div class="span9">
<iframe id="map_container" src="/map.html" frameborder="0"></iframe>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
map .html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<link rel="stylesheet" href="/css/map-styles.css" media="all">
</head>
<body>
<div id="map" class="map_canvas"></div>
</body>
</html>
map 样式.css
html, body, .map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
应用程序.js
google.maps.event.addDomListener(window, 'load', function() {
var options = {
zoom: 15,
center: new google.maps.LatLng(10.472937,-73.262308),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
$iframe = $('#map_container'),
map_el = $iframe.contents().find('#map')[0],
map = new google.maps.Map(map_el, options);
// Match iframe size to parent
$iframe.width($iframe.parent().width());
$iframe.height($iframe.parent().height());
});
关于css - 如何在应用程序中包含谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15016486/