Улучшена производительность загрузки нескольких маркеров с картами v3 - PullRequest
Новая
       21

Улучшена производительность загрузки нескольких маркеров с картами v3

0 голосов
/ 15 августа 2011

У меня есть функция для загрузки нескольких маркеров на карту (Maps api v3): 

function displayPois(){
    // Delete all POI marker from map
    if(poiMarker.length > 0){
        for (var i = 0; i < poiMarker.length; i++) {
                poiMarker[i].setMap(null);    
        };
    };
    // If zoom ok load marker data for map tile
    if (map.getZoom() > 10){
        var bnds = [];
        var bounds = map.getBounds();
        bnds[0] = bounds.getNorthEast().lat(); 
        bnds[1] = bounds.getNorthEast().lng(); 
        bnds[2] = bounds.getSouthWest().lat();
        bnds[3] = bounds.getSouthWest().lng();

          $.ajax({
            url  : base_url+"trackplanner/getpois",
            type : 'POST',
            data : {poirange : bnds},
            success: function(data) {
                if(data.length > 0){
                    var obj = $.parseJSON(data);
                    $.each(obj,function(i,poi){
                        var marker = null;
                        var infowindow = null;
                        var infostr = '<div id="trackplanner_poiwin"><b>'+poi.name+'</b><br />'+poi.street+'<br />'+poi.postalcode+' '+poi.city+'<br />'+poi.phone+'<br />';
                        if(poi.mail != ''){infostr = infostr + '<a href="mailto:'+poi.mail+'">'+poi.mail+'</a><br />'};
                        if(poi.web != ''){infostr = infostr + '<a href="'+poi.web+'">'+poi.web+'</a>'};
                        infostr = infostr + '</div>'
                        infowindow = new google.maps.InfoWindow({
                            content: infostr
                        });
                        marker = new google.maps.Marker({
                            position: new google.maps.LatLng(poi.lat,poi.lng),
                            icon:'images/'+ poi.category +'.png',
                            title: poi.name,
                            map: map
                        });
                        poiMarker.push(marker);
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow.open(map,marker);
                        });
                    });
                }
            },
            error: function() {console.log('error');}
          });
    };    
};

Это слушатели: 

google.maps.event.addListener(map, 'dragend', function() {
   displayPois();
});
google.maps.event.addListener(map, 'zoom_changed', function() {
   displayPois();
});

Есть ли варианты для улучшения производительности? Являются ли события прослушивания хорошими для загрузки POI? POI примерно 30-40 на плитке карты.

С наилучшими пожеланиями ...

1 Ответ

1 голос
/ 15 августа 2011

Лучшее, что я нашел, это использовать MarkerClusterer

вот библиотека: http://googlegeodevelopers.blogspot.com/2009/04/markerclusterer-solution-to-too-many.html

вот некоторый тест производительности: http://gmaps -utility-library.googlecode.com / svn / trunk / markerclusterer / 1.0 / examples / speed_test_example.html

...