javascript - 多个Google map

我目前有3个单独的google maps使用javascript api加载到我的网页上，它们花了好几秒钟来加载，这使页面变为非活动状态，直到完成为止。

有人对我可以做些什么改变有任何建议吗？目前这很慢，我不知道该如何解决。

谢谢！

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>

最佳答案

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