4

作業中の Web ページの Google Maps API をいじっています。私の問題は、マップが意図したとおりに読み込まれることですが、ページを更新した後にのみ読み込まれます。ページを更新しないと、キャンバスしか表示されません。ページを離れて戻っても問題が残るため、 へのマップの呼び出しに問題があるようinitializeです。

コード：

<style>
    #map_canvas {
    width: 670px;
    height: 400px;
    background-color: #CCC;
    }
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
    function initialize() {

        var myLatLng = new google.maps.LatLng(31.247681, 121.449504);

        var map_canvas = document.getElementById('map_canvas');

        var map_options = {
        center: new google.maps.LatLng(31.248195, 121.447431),
        zoom: 16,
                mapTypeControl: false,
                panControl: false,
        zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
        },
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(map_canvas, map_options);

        var contentString =
            '<b>Leung Gallery</b>' +
            '<p>50 Moganshan Rd. Building 7, Unit 108, Shanghai</p>' +
            '<p>&#19978;&#28023;&#26222;&#38464;&#21306;&#33707;&#24178;&#23665;&#36335;50&#21495;7&#21495;&#27004;108&#23460;</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

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

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

        google.maps.event.addListener(marker, 'click', function(){
            infowindow.open(map,marker);
        });

    }

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

以前の質問を閲覧したところ、私の問題と正確に一致するものは見つかりませんでしたが、同様の状況がいくつか見られたgoogle.maps.event.addDomListener(window, 'load', initialize);ので、それが問題の原因である可能性があると考えています. どんな助けでも大歓迎です。

編集：正しい方向に向けられました。$(document).bind("projectLoadComplete", initialize);後に追加google.maps.event.addDomListener(window, 'load', initialize);すると、問題が修正されます。問題は、ナビゲーションの使用時にページが完全にロードされないことでした。この問題は、おそらく Cargo Collective プラットフォームに限定されています。

4

6 に答える 6

5

解決策の検索に数時間失敗した後、最終的にこれを見つけました：

置き換えるだけです：

google.maps.event.addDomListener(window, 'load', initialize);

と：

$(document).ready(function(){
  initialize();
});
于 2016-10-29T17:53:23.237 に答える
2

API バージョン 3 呼び出しで

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

またはバージョン 2 の場合

map.checkResize()

google.maps.event.trigger(map, 'resize') 呼び出す前に必ず呼び出してください。そうしmap.fitBounds()ないと、予期しない結果が得られます。

于 2014-12-02T05:24:29.617 に答える
1

私はこれをチェックしましたが、私にとってはうまく機能しています。http://jsfiddle.net/aCx6L/をチェックしてくださいfiddle

于 2013-10-29T06:27:55.653 に答える
0

さまざまな提案を試して失敗した後、次のことがうまくいくことがわかりました。

try {google;} catch (e){location.reload();}

これは、マップを作成する直前に追加する必要があります。

サーバーに余分な負荷がかかるため、これが最善の解決策ではないことはわかっています。

また、Internet Explorer The Edge では最初のラウンドでマップを正しくロードできますが、Google Chrome ではロードできないこともわかりました。

于 2015-09-19T22:54:49.133 に答える