Question

我有一个包含100多个标记的地图。我已经向服务器发出了一个Ajax请求，并获得了一个包含很多lat，lon值的xml响应。加载这些值并在地图上添加标签的每个标记。 ajax请求和响应很快发生，并且每个标记都被快速添加到地图中。然后整个页面冻结一段时间。然后标记显示为大，然后变为正常。为什么Google地图会这样？

我在地图上的ajax请求，响应和添加标记的代码：

ajaxRequests[ax]=$.ajax({
        type: "GET",
        url: "myurl",
        dataType: "xml",
        async:true,
        success: function(xml) {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
            routepoints = new Array();

            $(xml).find('value').each(function(){
                var latt=$(this).find('lat').text();
                var lonn=$(this).find('lon').text();
                routepoints[i] = new Array(name,ct,latt,lonn,phone); 
                addMarker(i);
                i=i+1;
            });

            mzoom=map.getZoom();
        }
    });


function addMarker(tt)
{ 
    var icont;
    if(tt==0)
        icont='images/green.png';
    else if(tt==(total_markers-1))
        icont='images/red.png';
    else
        icont='images/purple.png';


    var idm=(tt+1)+") "+routepoints[tt][1];
    var clocation= new google.maps.LatLng(routepoints[tt][2],routepoints[tt][3]);
    var marker = new MarkerWithLabel({
            position: clocation,
            map: map,
            labelContent: idm,
            labelAnchor: new google.maps.Point(15, 5),
            labelClass: "labels",
            icon: icont
            });
    if(tt==0 || (tt+1)==total_markers)
        marker.setAnimation(google.maps.Animation.BOUNCE);
        else
        marker.setAnimation(google.maps.Animation.DROP);
    markersArray.push(marker);
    map.panTo(clocation);
}

Answer 1

我使用了Google地图实用程序库Clusterer API。标记根据缩放级别显示在地图上。现在它解决了我的整个页面悬挂问题。

以下链接将帮助您使用Clusterer API。

https://developers.google.com/maps/articles/toomanymarkers

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

在地图上添加100多个标记，冻结整个页面

1 个答案: