61

Google マップが部分的に表示され、他の領域がグレー表示されることがあります。問題が 1 つあります。Firebug を起動すると、画像がその灰色の領域に表示されます。なぜこれが起こっているのかわかりません。これを経験して解決策を見つけた人は、共有してください。

4

9 に答える 9

81

UPDATE 27/02/2020
サイズ変更イベントを手動でトリガーする必要はなくなりました。

v3を使用している場合は試してください

google.maps.event.trigger(map, "resize");

こちらもご覧ください

于 2010-10-02T13:46:59.007 に答える
36

このバグは、マップの のサイズを変更している場合に発生する可能性がありますDIV。サイズ変更後、gmap.checkResize()関数を呼び出してみてください。

于 2010-10-11T14:50:11.033 に答える
7

こんにちは、マップ コンテナーを使用して div でトグルを使用している場合は、関数で resizeMap を呼び出します

associated with the trigger:
        $(".trigger").click(function(){
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
         resizeMap();
        return false;

次に resizeMap(); このような

function resizeMap()
{
google.maps.event.trigger(map,'resize');
map.setZoom( map.getZoom() );
}

マップ変数をグローバルとして設定することを忘れないでください;)乾杯

于 2011-07-06T13:07:22.867 に答える
7

部分的に読み込まれた Google マップの簡単な解決策を見つけました。通常onLoad()、ページの残りの部分 (マップ要素を含む) が完全にロードされていないときに呼び出されることが原因です。これにより、部分的なマップの読み込みが発生します。この問題を回避する簡単な方法は、onLoadbody タグ アクションを変更することです。

古い方法:

onload="initialize()"

新しい方法:

onLoad="setTimeout('initialize()', 2000);"

これにより、Google Javascript が正しいサイズ属性にアクセスするまで 2 秒間待機します。また、試す前にブラウザのキャッシュをクリアしてください。時々そこに行き詰まります:)

これは、あなたが疑問に思っている場合に備えて、私のトップ Javascript 部分です (Google ドキュメントで説明されているとおりですが、 PHP 変数からLatitudeandを呼び出しているLongitudeため、PHP スニペット.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var point = new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>);
    var marker = new google.maps.Marker({ position:point, map:map })    
}
</script>
于 2012-06-15T04:46:10.397 に答える
4

グレーのストライプでもこの問題が発生したことをこのディスカッションに追加したいと思います。これは、gmap.Resize 関数を使用するために必要な問題ではなく、CSS にあったことです。私のcssで私が持っていた

img { 
max-width:50% 
}

したがって、これをcssファイルに設定すると

#map-canvas { 
max-width:none;
}

問題が消えた！私はグーグル全体を見ましたが、この答えを見つけることができませんでした。

于 2014-08-01T18:37:12.967 に答える
2

このスタイルは私の問題を解決しました

#map_canvas img { max-width: none !important; }

これにより、ブラウザはマップを必要なだけ広くすることができます。これは、!important基本的に「このスタイルを上書きしない」ことを意味します。

于 2015-10-20T08:18:49.657 に答える
2

上記の解決策は私にとっては何もうまくいきません。

display:none私は自分の地図に使用しましたが、それを変更することvisibility:hiddenでうまくいきます。

変化する

display:none

に

visibility:hidden

于 2018-07-03T08:10:27.397 に答える
0

私はこの方法で解決しました。私の問題は回転デバイスにありました。この解決策はうまく機能します:

$scope.orientation = function(){
            var supportsOrientationChange = "onorientationchange" in window,
                orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
            window.addEventListener(orientationEvent, function() {
                $interval(function(){
                    google.maps.event.trigger(map, 'resize');
                },100);
            });
        };
$scope.orientation();
于 2016-01-15T11:32:03.617 に答える