1

私のウェブサイトには、多数のマーカーを含む Google マップを表示するページが多数あります。例を次に示します。

ご覧のとおり、マップの読み込みに時間がかかるため、これを改善する方法を探しています。GeoWebCacheを使用してマップ タイルをサーバーにキャッシュすることを望んでいましたが、これは Google マップの利用規約に違反するとのことでした。

地図を表示してマーカーを追加するために使用するコードを以下に追加します。これは Google Maps V3 JavaScript API のかなり単純な使い方なので、最適化する余地はあまりないと思います。マップの読み込み時間を短縮するために実行できる明確な手順はありますか?

SF.Map = function(elementId, zoomLevel, center, baseImageDir) {

    this._baseImageDir = baseImageDir;
    var focalPoint = new google.maps.LatLng(center.latitude, center.longitude);

    var mapOptions = {
        streetViewControl: false,
        zoom: zoomLevel,
        center: focalPoint,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };

    this._map = new google.maps.Map(document.getElementById(elementId), mapOptions);
    this._shadow = this._getMarkerImage('shadow.png');
};

SF.Map.prototype._getMarkerImage = function(imageFile) {
    return new google.maps.MarkerImage(this._baseImageDir + '/map/' + imageFile);
};


SF.Map.prototype._addField = function(label, value) {
    return "<span class='mapField'><span class='mapLabel'>" + label + ": </span><span class='mapValue'>" + value + "</span></span>";
};

/**
 * Add a marker to the map
 * @param festivalData Defines where the marker should be placed, the icon that should be used, etc.
 * @param openOnClick
 */
SF.Map.prototype.addMarker = function(festivalData, openOnClick) {

    var map = this._map;
    var markerFile = festivalData.markerImage;

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(festivalData.latitude, festivalData.longitude),
        map: map,
        title: festivalData.name,
        shadow: this._shadow,
        animation: google.maps.Animation.DROP,
        icon: this._getMarkerImage(markerFile)
    });

    var bubbleContent = "<a class='festivalName' href='" + festivalData.url + "'>" + festivalData.name + "</a><br/>";
    var startDate = festivalData.start;
    var endDate = festivalData.end;

    if (startDate == endDate) {
        bubbleContent += this._addField("Date", startDate);

    } else {
        bubbleContent += this._addField("Start Date", startDate) + "<br/>";
        bubbleContent += this._addField("End Date", endDate);
    }

    // InfoBubble example page http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
    var infoBubble = new InfoBubble({
        map: map,
        content: bubbleContent,
        shadowStyle: 1,
        padding: 10,
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#2c2c2c',
        disableAutoPan: true,
        hideCloseButton: false,
        arrowSize: 0,
        arrowPosition: 50,
        arrowStyle: 0
    });

    var mapEvents = google.maps.event;

     // either open on click or open/close on mouse over/out
    if (openOnClick) {

        var showPopup = function() {
            if (!infoBubble.isOpen()) {
                infoBubble.open(map, marker);
            }
        };
        mapEvents.addListener(marker, 'click', showPopup);

    } else {

        mapEvents.addListener(marker, 'mouseover', function() {
            infoBubble.open(map, marker);
        });

        mapEvents.addListener(marker, 'mouseout', function() {
            infoBubble.close();
        });
    }
};
4

2 に答える 2

2

次のようなGoogleマップの「遅延読み込み」を試すことができます。

var script=document.createElement("script");
script.type="text/javascript";
script.async=true;
script.src="http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady";
document.body.appendChild(script);

または、このように、Facebook AIPでこれを実行して、初期ロード時間が遅くならないようにします。

$.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() { 
           FB.init({appId: opt.facebook_id, status: true, cookie: true, xfbml: true}); 
});

例： http： //blog.rotacoo.com/lazy-loading-instances-of-the-google-maps-api

また、HTMLを見ると、インラインではなく外部JSファイルにあるはずのJSがたくさんあります。重複するインラインコードをたくさん持つ代わりに、配列を渡すことはできません。

于 2012-09-27T09:33:37.980 に答える
1

1 つのオプションは、静的スナップショットを取得し、その背後にマップを作成することです。マップが完全にロードされたら、動的マップを静的マップに置き換えます。

https://developers.google.com/maps/documentation/staticmaps/もご覧になることをお勧めします 。

完全な動的マップ API を使用せずに、サイトにより簡単なソリューションを提供できる場合があります。

于 2012-09-27T09:08:52.157 に答える