1

所以我正在开发一个使用 CloudMade JavaScript 地图的网站。我必须加载地图，然后绘制大约 14,000 个标记。该网站的重点是可视化整个美国的标记（它们每个都用不同的颜色绘制）。因为我正在这样做，所以我不能使用现有的集群工具。

map.addOverlay(MyMarker)最初，我使用 PHP 从数据库中提取数据点，并使用该函数将它们一一绘制在地图上。这花了非常长的时间，所以我改变了我的方法。现在我将所有数据都保存在一个 JSON 文件中，并使用以下 JavaScript 代码绘制这些点：

    $(document).ready(function(){
            var url="m/results.json";
            $.getJSON(url,function(json){
                $.each(json.posts,function(i,post){
                    var myMarkerLatLng = new CM.LatLng(post.Latitude,post.Longitude);
                    var myMarker = new CM.Marker(myMarkerLatLng, {
                        title: post.City + ", " + post.State,
                    });

                    map.addOverlay(myMarker);
                });
            });
        });

虽然这要好得多，但我希望它更快。目前它在大约 8 秒内加载，但我需要它是实时的。为了使网站更快，我遵循了 Google 的 Web 性能指南，https://developers.google.com/speed/docs/best-practices/rules_intro。但是在遵循这些约定时，我在文件末尾运行了上面的代码。这允许加载整个网页（包括地图），但它会停顿几秒钟，然后一次绘制所有标记。

有关使其更快的任何提示或建议？

PS - 我最初加载了整个美国的地图。这意味着我必须在初始加载时绘制所有这些 =/. 不幸的是，没有办法解决这个问题。

4

0 回答 0