0

我通过javascript在我网站的一个页面上有一个谷歌地图背景，但我注意到它并不总是加载。相反，它的一部分将显示为左上角的一个小方块（好像它在平铺页面时停止）。如果我刷新屏幕甚至调整窗口大小，它会加载，然后我暂时无法重现问题。

首次访问该网站时最常发生这种情况，这对于我们想要吸引该网站的新访问者来说显然是一个问题。

关于让它更好地加载的任何想法？或者关于问题是什么的想法？

代码：

/*
    Global
    */
    var map;

    function initialize() {

        /*
        Basic Setup
        */

        var latLng = new google.maps.LatLng(39.726020913196265, -105.00015970000004);

        var myOptions = {
            panControl: false,
            zoomControl: false,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            draggable: true,
            disableDoubleClickZoom: true,     //disable zooming
            scrollwheel: false,
            zoom: 16,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP //   ROADMAP; SATELLITE; HYBRID; TERRAIN;
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        /*
        MARKER
        */

        /*
        //for custom image
        var image = 'yourflag.png';
        icon: image 

        //for animation marker drop
        animation: google.maps.Animation.DROP

        */
        var markerlatlng = new google.maps.LatLng(39.726020913196265, -105.00015970000004);

        var marker = new google.maps.Marker({
            position: markerlatlng,
            title:"Hello World!"
        });

        marker.setMap(map);

        /*
        INFO Bubble
        */

        myInfoWindowOptions = {
            content: '',
            maxWidth: 275
        };

        infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);

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

        google.maps.event.addListener(marker, 'dragstart', function(){
            infoWindow.close();
        });

        infoWindow.open(map,marker);


    }//end initialize


    /*
    onLoad
    */
    $(function(){
        initialize();

        $("#zo").click(function(event){
            event.preventDefault(); 
            map.setZoom( map.getZoom()-1 );
            //map.setCenter(new google.maps.LatLng(9.825183,15.1975769));
        });

        $("#zi").click(function(event){
            event.preventDefault(); 
            map.setZoom( map.getZoom()+1 );
        });

        $("#gt").click(function(event){
            event.preventDefault(); 
            var lt1 = new google.maps.LatLng(36.114739, -115.171840);
            //map.setZoom( 16 );
            map.panTo(lt1);
        });

    });
4

1 回答 1

0

首先，我喜欢页面的滚动效果，但是查看代码和页面源，我无法完全说出您的 onload 事件是如何触发的。我有时也会遇到某些页面无法在某些浏览器上完全加载的问题。

您是否尝试过附加多个事件来加载背景？

        function doLoad() {  // this is what executes when page is to load
             initialize();
        }
        //different event handlers for page load
        if ( window.addEventListener ) { 
              window.addEventListener( "load", doLoad, false );
        }
        else if ( window.attachEvent ) { 
              window.attachEvent( "onload", doLoad );
        } 
        else  if ( window.onLoad ) {
              window.onload = doLoad;
        }
        else window.setTimeout('doLoad', 1000);
于 2013-01-18T17:21:05.330 回答