МАССИВНЫЕ КАРТЫ GOOGLE. 5000 мест, 5 МБ. Как сделать это быстрее? - PullRequest
Новая
       22

МАССИВНЫЕ КАРТЫ GOOGLE. 5000 мест, 5 МБ. Как сделать это быстрее?

0 голосов
/ 23 ноября 2010

Я пытаюсь загрузить Google Maps 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 (5 МБ). Я хотел бы кэшировать его, но 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]))

                  }
         }

Ответы [ 3 ]

3 голосов
/ 23 ноября 2010

Если я вас правильно понял, у вас есть пример кода, повторенный 5000 раз, с '4821', широтой и шириной строки и строкой содержимого для каждого из 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 маркеров, имеющих атрибуты последнего элемента в списке (могут потребоваться небольшие изменения)

2 голосов
/ 23 ноября 2010

Поскольку вся информация, необходимая для одного маркера, такова: 

[lat,lng,contentString]

... вы можете сохранить эти данные в массиве и зациклить массив.В зависимости от contentString вам теперь нужно что-то от 150 КБ и более, что не должно быть большой проблемой.

Если данные, относящиеся к маркам, не меняются, вы можете использовать внешний js-файл, поэтомубраузер может использовать их из своего кэша при будущих посещениях.

0 голосов
/ 23 ноября 2010

Я не уверен, каковы издержки на конструкторы для Google InfoWindow и Marker, я могу представить, что они здоровенные, но я могу вам точно сказать, добавив новую функцию, используя замыканиепеременные, вы предотвращаете избавление от КАЖДОГО объекта в рутине.

Это может быть основной причиной вашей проблемы и является классическим сценарием утечки памяти.См. Принятый ответ от этой записи.

Я бы согласился, что вам лучше хранить в массиве то, что вам нужно, и создавать экземпляры только при необходимости в обработчике кликов.

...