Question

我正在尝试在单个页面上加载多个谷歌地图，但页面加载时间非常长。如何加快页面加载时间？

我的示例html代码如下。实际上，在循环中创建的谷歌地图下面，它们的数量将至少为100。

    <!DOCTYPE html>
<html>
<head>        
</head>

<body>          
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

    <div id="postid_78" style="width:600px;height:150px;">
        <script>                    
                var mapProp = {
                    center: new google.maps.LatLng('42.5000', '1.5000'),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("postid_78"), mapProp);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng('42.5000', '1.5000'),
                    map: map
                });
        </script>                
    </div>
    <hr />
    <div id="postid_77" style="width:600px;height:150px;">
        <script>                    
                var mapProp = {
                    center: new google.maps.LatLng('42.5000', '1.5000'),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("postid_77"), mapProp);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng('42.5000', '1.5000'),
                    map: map
                });
        </script>                
    </div>
    <hr />
    <div id="postid_76" style="width:600px;height:150px;">
        <script>                    
                var mapProp = {
                    center: new google.maps.LatLng('42.5000', '1.5000'),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("postid_76"), mapProp);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng('42.5000', '1.5000'),
                    map: map
                });
        </script>                
    </div>
    <hr />
    <div id="postid_75" style="width:600px;height:150px;">
        <script>                    
                var mapProp = {
                    center: new google.maps.LatLng('42.5000', '1.5000'),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("postid_75"), mapProp);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng('42.5000', '1.5000'),
                    map: map
                });
        </script>                
    </div>
    <hr />
    <div id="postid_74" style="width:600px;height:150px;">
        <script>                    
                var mapProp = {
                    center: new google.maps.LatLng('42.5000', '1.5000'),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("postid_74"), mapProp);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng('42.5000', '1.5000'),
                    map: map
                });
        </script>                
    </div>
    <hr />
    <div id="postid_73" style="width:600px;height:150px;">
        <script>                    
                var mapProp = {
                    center: new google.maps.LatLng('42.5000', '1.5000'),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("postid_73"), mapProp);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng('42.5000', '1.5000'),
                    map: map
                });
        </script>                
    </div>

</body>
</html>

Answer 1

为了提高页面加载速度，您可以（必须）做几件事。

加载API asyncron DOCUMENTATION HERE
仅在视口中显示地图时初始化地图因此，您可以使用插件LIKE THIS
也将JS脚本始终放在body标签的底部。因此，所有内容都被加载，没有javascript会拒绝内容加载

这应该会增加页面加载量。我已经在几个项目上完成了这项工作并且工作正常！

在单个页面上加载多个Google地图

1 个答案: