加快谷歌地图

我有一个 asp.net 4.0页面，它加载了一个谷歌地图，有超过6000个标记（而且还在增长！我正在使用 javascript 中的中继器控件从我的 SQL DB 加载标记，如下所示 [此示例：] （http://www.aspsnippets.com/Articles/ASPNet-Populate-Google-Maps-V3-with-Multiple-Markers-using-Address-Latitude-and-Longitude-values-stored-in-database.aspx）

我已经添加了标记聚类，并尽我所能来加快速度。某些标记是在初始加载期间添加的，但在用户放大之前不会显示在地图上。（通过高度：1 宽度：1 作为群集图标）

这是我想做的，但我不确定这是否可能。我想让我的 vb 代码隐藏/asp：Repeater 加载最初将显示的标记。然后在"空闲"列表器中，让它加载其他标记，以便在地图放大后它们准备就绪。但是，我不知道如何做到这一点。有什么想法吗？

以下是大部分的javascript：

 // configure options
            var map;
            var locations = new Array();
            var markers = new Array();
            var markerCluster1 = null;
            var markerCluster2 = null;
            var markerCluster3 = null;
            var markerCluster4 = null;
            var Style1 = [{url: '../images/m1.png',
                height: 48,
                width: 48
            }];
            var Style2 = [{url: '../images/m2.png',
                height: 48,
                width: 48
            }];
            var Style3 = [{url: '../images/m3.png',
                height: 48,
                width: 48
            }];
            var Style4 = [{url: '../images/m4.png',
                textSize: 1,
                height: 1,
                width: 1
            }];
            var mcOA1 = {gridSize: 50, maxZoom: 10, styles: Style1};
            var mcOA2 = {gridSize: 50, maxZoom: 10, styles: Style2};
            var mcOA3 = {gridSize: 50, maxZoom: 10, styles: Style3};
            var mcOA4 = {gridSize: 300, maxZoom: 9, styles: Style4, minimumClusterSize: 2};
            var infoWindow = new google.maps.InfoWindow();
            <asp:Repeater ID="rptMarkers" runat="server" EnableViewState = false>
                <ItemTemplate>locations[<%# Eval("i")%>]=new Array(),locations[<%# Eval("i")%>][0]='<%# Eval("PType")%>',locations[<%# Eval("i")%>][1]='<%# Eval("Lat")%>',locations[<%# Eval("i")%>][2]='<%# Eval("Lon")%>',locations[<%# Eval("i")%>][3]='<div class='"info-window'"><%# Eval("MDesc")%></div>',locations[<%# Eval("i")%>][4]='<%# Eval("Name") %>';
             </ItemTemplate>
        <SeparatorTemplate></SeparatorTemplate>
        </asp:Repeater>
            function initialize() {
                var myOptions = 
            <asp:Repeater ID="MapOptions" runat="server">
            <ItemTemplate>
                        {
                            center: new google.maps.LatLng(<%# Eval("center")%>),
                            zoom: <%# Eval("zoom")%>,
                            streetViewControl: false,
                            mapTypeId: <%# Eval("mapTypeId")%>
                            }
</ItemTemplate>
    </asp:Repeater>
                        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                        for (i = 1; i < locations.length; i++) {
                            if (typeof(locations[i]) == 'object') {
                                var icon = "";
                                switch (locations[i][0]) {
                                    case "A1":
                                        icon = "../images/A13.png";
                                        break;
                                    case "A2":
                                        icon = "../images/A23.png";
                                        break;
                                    case "A3":
                                        icon = "../images/A33.png";
                                        break;
                                    case "A4":
                                        icon="../images/A44.png"
                                        break;
                                    case "Furniture":
                                        icon="../images/Furniture3.png"
                                        break;
                                    case "Property Manager":
                                        icon="../images/PropertyManager3.png"
                                        break;
                                    default:
                                        icon="../images/A13.png"
                                        break;
                                }
                                var point = new google.maps.LatLng(locations[i][1], locations[i][2]);
                                markers[i] = new google.maps.Marker({
                                    position: point,
                                    icon: new google.maps.MarkerImage(icon),
                                    animation: google.maps.Animation.DROP,
                                    title: locations[i][4]
                                });
                                markers[i].setMap(map);                 
                                google.maps.event.addListener(markers[i], 'click', function() {infoWindow.setContent(locations[i][3]);infoWindow.open(map, markers[i]);});
                            }
                        } // for


                // check to see which category is selected
                        var location_selector = document.getElementsByName('loc_sel');
                        for (var i=0; i < location_selector.length; i++) {
                            if (location_selector[i].checked) {
                                var location_type = location_selector[i].value;
                            }
                        }
                        show_markers(location_type);
                    } // function initialize() {

                    function show_markers (location_type) {
                        var temp_markers1 = new Array();
                        var temp_markers2 = new Array();
                        var temp_markers3 = new Array();
                        var temp_markers4 = new Array();
                        // if the markerClusterer object doesn't exist, create it with empty temp_markers
                        if (markerCluster1 == null) {
                            markerCluster1 = new MarkerClusterer(map, temp_markers1, mcOA1);
                        }
                        if (markerCluster2 == null) {
                            markerCluster2 = new MarkerClusterer(map, temp_markers1, mcOA2);
                        }
                        if (markerCluster3 == null) {
                            markerCluster3 = new MarkerClusterer(map, temp_markers1, mcOA3);
                        }
                        if (markerCluster4 == null) {
                            markerCluster4 = new MarkerClusterer(map, temp_markers1, mcOA4);
                        }
                        // clear all markers
                        markerCluster1.clearMarkers();
                        markerCluster2.clearMarkers();
                        markerCluster3.clearMarkers();
                        markerCluster4.clearMarkers();
                        // iterate through all locations, setting only those in the selected category
                        for (i = 1; i < locations.length; i++) {
                            if (typeof(locations[i]) == 'object') {
                                if (locations[i][0] == location_type) {
                                    markers[i].setVisible(true);
                                    if (locations[i][0] == "A1") {temp_markers1.push(markers[i]);}
                                    if (locations[i][0] == "A2") {temp_markers2.push(markers[i]);}
                                    if (locations[i][0] == "A3") {temp_markers3.push(markers[i]);}
                                    if (locations[i][0] == "A4") {temp_markers4.push(markers[i]);}
                                } else {
                                    markers[i].setVisible(false);
                                    if (locations[i][0] == "A4") {markers[i].setVisible(true); 
                                        temp_markers4.push(markers[i]);}
                                }
                            }
                        } // for
                        // add all current markers to cluster
                        markerCluster1.addMarkers(temp_markers1);
                        markerCluster2.addMarkers(temp_markers2);
                        markerCluster3.addMarkers(temp_markers3);
                        markerCluster4.addMarkers(temp_markers4);
                    } // function show_markers

谢谢大家！