1

現在、javascript API を使用して 3 つの個別の Google マップを Web ページにロードしていますが、ロードに数秒かかり、完了するまでページが非アクティブになります。

これを変更するために私ができることについて、何か推奨事項はありますか? 現時点では非常に遅く、これを回避する方法がわかりません。

ありがとう！

function googlemap() {

    // map pin
    var companyImage = new google.maps.MarkerImage('http://urlgoeshere.co.uk/images/home/map_pin.png',
        new google.maps.Size(100,60),
        new google.maps.Point(0,0),
        new google.maps.Point(21,65)
    );

    // map pin shadow
    var companyShadow = new google.maps.MarkerImage('http://urlgoeshere.co.uk/images/home/map_shadow.png',
        new google.maps.Size(120,60),
        new google.maps.Point(0,0),
        new google.maps.Point(23,23)
    );

    // map one
    var onePos = new google.maps.LatLng(44.374411, -1.088402);
    var oneSettings = {
        zoom: 15,
        center: onePos,
        scrollwheel: false,
        mapTypeControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        panControl: false,
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var oneMap = new google.maps.Map(document.getElementById("one_map"), oneSettings);
    var oneMarker = new google.maps.Marker({
        position: onePos,
        map: oneMap,
        icon: companyImage,
        shadow: companyShadow,
        zIndex: 3
    }); 

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


    // two
    var twoPos = new google.maps.LatLng(42.349055,4.110803);
    var twoSettings = {
        zoom: 15,
        center: twoPos,
        scrollwheel: false,
        mapTypeControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        panControl: false,
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var twoMap = new google.maps.Map(document.getElementById("two_map"), twoSettings);
    var twoMarker = new google.maps.Marker({
        position: twoPos,
        map: twoMap,
        icon: companyImage,
        shadow: companyShadow,
        zIndex: 3
    }); 

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

    // three
    var threePos = new google.maps.LatLng(32.377624,-0.523466);
    var threeSettings = {
        zoom: 15,
        center: threePos,
        scrollwheel: false,
        mapTypeControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        panControl: false,
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var threeMap = new google.maps.Map(document.getElementById("three_map"), threeSettings);
    var threeMarker = new google.maps.Marker({
        position: threePos,
        map: threeMap,
        icon: companyImage,
        shadow: companyShadow,
        zIndex: 3
    }); 

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

そして私のhtml

<div id="one_map"></div>
    <div id="two_map"></div>
    <div id="three_map"></div>
4

2 に答える 2

1

おそらく、OS または帯域幅に関係している可能性があります。

これらを見てください：

9 マップ: http://maps.forum.nu/gm_maps_in_sync.html

と

16 マップ: http://maps.forum.nu/gm_maps_in_sync2.html

それらは API V2 であり、ほとんど役に立ちませんが、ループで作成され、高速にロードされます。

getElementById() は、DOM の複雑さによってはコストがかかることに注意してください。私が投稿した例では、代わりに createElement() と appendChild() を使用しています。

于 2012-07-18T17:55:32.900 に答える
1

作成しているマップごとに関数を 1 つの関数 (またはパラメーターに基づいて作業を実行できる 1 つの動的関数) に分割し、それぞれの最後に次のsetTimeoutいずれかの呼び出しを使用して次の関数を実行することをお勧めします。 0 の遅延、またはわずかな遅延です。その後、関数をドロップアウトすると、タスク全体が完了するのを待たずに、UI を更新する時間を与えます。実際にページを高速化するわけではありませんが、高速で応答性が向上したように感じます。他にも改善点があるかもしれませんが、この単純な変更が大きな違いを生むことがよくあります。

于 2012-07-18T14:13:25.387 に答える