2

このコードは、jsfiddle やその他の JavaScript サンドボックス アプリでは完全に機能しますが、私の Web サイトでは機能しません。

HTML :

<div id="mapcontainer" style="position:absolute;width:280px;height:160px;"></div>

JS:

<script src="http://maps.googleapis.com/maps/api/js?key=*********************************&sensor=false"></script>
<script>
    var myCenter = new google.maps.LatLng(33.436150, -117.623090);

    function initialize() {
        var mapProp = {
            center: myCenter,
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("mapcontainer"), mapProp);

        var marker = new google.maps.Marker({
            position: myCenter,
        });

        marker.setMap(map);

        google.maps.event.trigger(map, 'resize')
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

次のようになります。

ここに画像の説明を入力

上の 2/3 が歪んでいて、下の 1/3 が正常であることに注目してください。どうすればこれを修正できますか?

4

3 に答える 3

1

開発中の Google マップで同じ問題が発生した後、このページに出くわしました。私が思いついた解決策は、Google マップの JavaScript の後に次のコードを追加することでした。

$(window).resize(function(){ initMap(); });

「initMap();」一部はマップ機能を更新するだけです。関数に別の名前を付けた場合は、それを使用する必要があります。最終的に、これは問題へのパッチであることに気付きました。しかし、それは魔法のように機能し、エンドユーザーにはほとんど気付かれません. ウィンドウのサイズを変更するときにマップ機能を更新するだけです。

于 2015-11-19T20:48:36.343 に答える
1

コードに他の問題があるに違いないようです。

Google マップのコードは完璧に見えます。違いを示すためにフィドルを作成しました。

あなたのスクリプトから、Google maps の key を使用しているようです。v3では必要ないと思います。以下のように置き換えてみてください。

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
于 2013-06-29T19:21:43.600 に答える
0

コメントでこの問題を解決したため、同様の問題を見つけました。

css デバッガーでマップ内の画像の 1 つを見て、ページ上の他のスタイルの影響を受けているかどうかを確認するケースでした。

于 2015-10-08T19:41:45.817 に答える