Question

我有一个将多个标记加载到地图的功能（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。

最好的问候......

Answer 1

我找到的最好的事情是使用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

使用地图v3提高加载多个标记的性能

1 个答案: