0

この質問は設計に固有のものです。地図上に位置を表示するアプリケーションがあり、すべて「正常に」機能します。しかし、今度は、マップ（ボタン、フォームなど）を超えて、マップの片側に配置されるユーザーインターフェイスを設計する必要がありますが、何らかの理由で、CSSページの一部を変更するとマップが表示されます。

私自身のCSSもブートストラップ（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);    
});

しかし、明らかに、アプリケーションをビルドするには十分ではありません。

4

1 に答える 1

0

マップがCSSの他の部分の影響を受けない唯一の方法であると思われるため、iframeの使用を含むソリューション

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-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());
});
于 2013-02-22T16:18:50.063 に答える