Question

我带来100张地图在同一页面上发布，每页都有一些标记，每张地图平均有5个标记。但是，在加载页面时，谷歌地图加载前需要将近一分钟。这是我现在的代码，我只是不确定如何更快地将地图加载到加载程序。

 window.onload = function () {
        initialize();
                }
          var coords = [
          {lat: 40.88589, lng: -73.892110, zoom: 10}
       ];
    var maps = [];

     var markers = [
       MARKER DATA IN HERE    

     ];

     var counter=100;

    function initialize() {
for(var i = 0, length = counter; i < length; i++)
{
    var point = coords;
    var latlng = new google.maps.LatLng(point.lat, point.lng);

    maps[i] = new google.maps.Map(document.getElementById('map-canvas' + (i + 1)), {
        zoom: point.zoom,
        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP

    });       
 var infoWindow = new google.maps.InfoWindow();




    for (var j = 0; j < markers.length; j++) {
        var data = markers[j];
        if(data.Rank==(i+1)){
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: maps[i],
            title: data.officer
        });

        //Attach click event to the marker.
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
                infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.officer + "</div>");
                infoWindow.open(maps[i], marker);
            });
        })(marker, data);
        }
    }

    }

}

Answer 1

如果初始化~100个JavaScript地图效率太低/太慢，我会尝试从静态地图API [1]开始并加载显示标记但不是动态的静态图像，以便快速加载页面的外观。

异步，也许当您检测到用户准备与其中一个地图进行交互时，您可以使用动态JavaScript地图替换静态地图。

你甚至可以变得更聪明，只加载用户可见的地图。如果你一次只能看到前20个地图，并且用户必须滚动查看剩下的地图，也许只有加载前40个地图才有意义，所以当用户滚动时你会有内容，但你不会浪费你的时间加载100个地图直接蝙蝠。

[1] https://developers.google.com/maps/documentation/static-maps/intro

如何优化在一个页面上加载多个Google API地图

1 个答案: