javascript - 多个谷歌地图

Question

我目前有 3 个单独的谷歌地图正在使用 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>

Answer 1

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