Question

这个问题是针对设计的。我有一个在地图上显示位置的应用程序都可以“正常”工作。但是现在我需要设计超出地图（按钮，表格等）的用户界面，这些界面将位于地图的一侧，但是一旦改变了一些CSS页面，地图就会显示出来。

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

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

如果尝试使用简单的标记和样式

，我可以完美地完成地图的工作

的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>

styles.css的

html, body, .map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}

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

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

Answer 1

请参阅此链接，我希望这对您有所帮助http://jqueryui.com/spinner/#latlong

Answer 2

包含iframe使用的解决方案，因为它似乎是地图不受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>

地图styles.css的

html, body, .map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}

app.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());
});

如何在应用程序中包含谷歌地图

的index.html

styles.css的

app.js

2 个答案:

的index.html

map.html

地图styles.css的

app.js