0

我正在尝试加载显示 5000 个可点击标记的 Google Maps v3。我的 JS 每个地方包含 10 行：

              var myLatlng_4821 = new google.maps.LatLng(43.0754329,-71.4699752);
              var contentString_4821 =  "<b>Place 1</b>";
              var infowindow_4821 = new google.maps.InfoWindow({content: contentString_4821});
              var marker_4821 = new google.maps.Marker({
                                          position: myLatlng_4821, 
                                          map: map, 
                                          icon: image
                                      });
             google.maps.event.addListener(marker_4821, 'click', function() {
                                        infowindow_4821.open(map,marker_4821);
                                      });

所以它给了我一个 50 000 行的 js (5MB)。我很想缓存它，但 heroku 不允许页面加载超过 30 秒，所以我什至无法缓存它一次。

你有什么技巧可以更快地加载这个页面吗？我只设法在本地完成（需要 45 秒~）。我没有其他东西要加载。我使用 RoR。

非常感谢！

解决方案（这很酷）。

 var myLatlng = [];
 var infowindow = [];
 var marker = [];

                  function MakeInfoWindowEvent(map, infowindow, marker) {  
                     return function() {  
                        infowindow.open(map, marker);
                     };  
                  }

                  for (var i=0;i < places.length;i++)
                  {   

                        myLatlng[i] = new google.maps.LatLng(places[i][0],places[i][1]);

                         infowindow[i] = new google.maps.InfoWindow({
                                 content: places[i][2]
                             });

                         marker[i] = new google.maps.Marker({
                              position: myLatlng[i],
                              map: map
                          });

                           google.maps.event.addListener(marker[i], 'click', MakeInfoWindowEvent(map, infowindow[i], marker[i]))

                  }
         }
4

3 回答 3

3

如果我理解正确，您的示例代码重复了 5000 次，其中 '4821'、lat&lng 和内容字符串对于 5000 个标记中的每一个都不同？

如果是这样，那么你需要改变你的方法，以便它是“重复”的数据而不是代码......

var markers = [
    [43.0754329,-71.4699752,"Info for first marker"],
    [45.0473490,-56.47688356,"Info for second marker"],
    .
    .
    .
    [20.1234384,12.23462566,"Info for last marker"]
];
for(var i=0; i < markers.length; i++){
    var latLng = new google.maps.LatLng(markers[i][0], markers[i][1]);
    var contentString =  markers[i][2];              
    var infowindow = new google.maps.InfoWindow({content: contentString});
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: image
    });
    google.maps.event.addListener(marker, 'click', function()
    {
        infowindow.open(map,marker);
    });
}

这将大大减少您的页面大小，并且可能会解决缓存问题。

虽然有一点警告 - 上面的代码仅说明了如何删除重复的代码并将其替换为数据查找，但是一次创建这么多 InfoWindow 实例可能会出现问题（您最好在侦听器中创建 InfoWindow . 另外，我不完全确定闭包中变量的可见性，因此您最终可能会得到 5000 个具有列表中最后一项属性的标记（可能需要稍作更改）

于 2010-11-23T08:49:18.510 回答
2

由于单个标记所需的所有信息是这样的：

[lat,lng,contentString]

...您可以将此数据存储在一个数组中并循环该数组。根据 contentString，您现在应该需要 150KB 以上的内容，这应该不是什么大问题。

如果与标记相关的数据没有改变，您可以使用外部 js 文件，这样浏览器就可以在以后的访问中从缓存中使用它们。

于 2010-11-23T08:22:58.813 回答
0

我不确定 Google 的构造函数的开销是多少InfoWindow，Marker我可以想象它们很大，但我可以肯定地告诉你，通过使用闭包变量添加一个新函数，你正在阻止处理例程中的每个对象。

这可能是您问题的大部分原因，并且是内存泄漏的典型场景。请参阅这篇文章中接受的答案。

我同意您最好将所需的内容存储在数组中，并且仅在必要时在单击处理程序中实例化。

于 2010-11-23T08:31:32.773 回答