MASSIVE谷歌地图。 5000个地方，5MB。如何使它更快吗？

Question

我试图加载谷歌地图V3昭示着5000个标记点击。我的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秒负荷，所以我甚至不能缓存它一次。

将您有任何招数更快加载这个页面？我只设法在本地做（需要45S〜）。我没有别的负载。我用回报率。

非常感谢！

<强>解（它是相当凉）。

 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]))

                  }
         }

Answer 1

如果我正确理解你，你有示例代码重复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);
    });
}

这将由显著量减少页面的大小，可能会解决缓存问题。

警告，虽然一个字 - 上面的代码只是说明如何删除重复的代码，并将其与数据进行查找，但也有可能是一次创造如此多的信息窗口实例的问题（你可能会更好创建信息窗口在监听器里。 此外，我不能完全肯定的变量在封闭的可视性，所以你可以用具有的最后一个项目的属性标志5000在列表中（可能需要略有改动）

结束

Answer 2

当你需要一个单一标记的所有信息是这样的：

[lat,lng,contentString]

...你可以在阵列和环阵列存储这些数据。 根据你现在应该需要从150KB向上东西contentString，什么不应该是一个大问题。

如果相关市场上赢得该数据不会改变，你可以使用一个外部JS文件，这样浏览器就可以从它的缓存在今后的访问中使用它们。

Answer 3

我不知道什么样的构造为谷歌InfoWindow和Marker开销的，我能想象他们是沉重的，但我可以告诉你肯定的，通过使用闭包变量添加新的功能，你”重新防止处置中的每个对象中的程序。

这可占多数的问题，并为内存泄漏的经典场景。看到从此交接受的答案。

我同意你会更好存储您在数组中需要什么，只有在点击处理程序实例化时必要的。