1

我目前使用 javascript api 在我的网页上加载了 3 个单独的谷歌地图，加载它们需要几秒钟的时间，这会使页面处于非活动状态，直到它们完成。

有人对我可以做些什么来改变这一点有任何建议吗？目前它非常慢，我不知道如何解决这个问题。

谢谢！

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

我建议将您的函数分解为您正在创建的每个地图的一个函数（或一个可以根据参数完成工作的动态函数），然后在每个函数结束时，使用setTimeout调用执行下一个延迟为 0，或只是一个小延迟。当您退出该功能时，您可以让 UI 有时间更新，而无需等待整个任务完成。虽然实际上并没有让你的页面更快，但它让人感觉更快、响应更快。可能还有其他改进，但是这种简单的更改通常会产生巨大的影响。

于 2012-07-18T14:13:25.387 回答
1

也许它与您的操作系统或带宽有关。

看看这些：

9 张地图： http: //maps.forum.nu/gm_maps_in_sync.html

和

16 张地图： http: //maps.forum.nu/gm_maps_in_sync2.html

它们是 API V2，几乎没用，但它们是在循环中创建的，并且加载速度很快。

请注意，根据 DOM 的复杂性，getElementById() 的成本可能很高。我发布的示例使用 createElement() 和 appendChild() 代替。

于 2012-07-18T17:55:32.900 回答