0

这个问题是特定于设计的。我有一个应用程序可以在地图上显示所有位置都“正常”。但现在我需要设计超越地图的用户界面（按钮、表单等），这些将位于地图的一侧，但无论出于何种原因，一旦更改了某些 CSS 页面，地图就会显示。

我有点绝望，因为我自己的 CSS 或 bootstrap (2.3.0)、foundation (3.2.5) 都不起作用。地图根本没有显示，在控制台中没有错误。事件在更好的情况下显示地图但图形故障（缩放控件混乱，标记位置错误等）这可能正在发生以及我如何解决这个问题。我必须使用 iframe 吗？还是有更好的解决方案？

我已经阅读了有关max-width: none修复的信息，但这并没有解决任何问题。为了澄清我使用的地图不是静态的。

如果尝试使用简单的标记和样式，我可以完美地完成地图工作

索引.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);    
});

但显然它不足以构建应用程序。

4

1 回答 1

0

包含使用 iframe 的解决方案，因为这似乎是地图不受 CSS 其余部分影响的唯一方法

索引.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>

地图.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>

地图样式.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());
});
于 2013-02-22T16:18:50.063 回答