Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/405.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在地图上添加100多个标记,会冻结整个页面_Javascript_Google Chrome_Google Maps Api 3 - Fatal编程技术网

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

Javascript 在地图上添加100多个标记,会冻结整个页面,javascript,google-chrome,google-maps-api-3,Javascript,Google Chrome,Google Maps Api 3,我有一个有100多个标记的地图。我向服务器发出了一个Ajax请求,得到了一个包含大量lat、lon值的xml响应。循环这些值,并在地图上用标签添加每个标记。ajax请求和响应很快发生,每个标记都被快速添加到映射中。然后整个页面冻结一段时间。然后标记显示为最大,然后恢复正常。谷歌地图为什么会这样 我的ajax请求、响应和地图上添加标记的代码: ajaxRequests[ax]=$.ajax({ type: "GET", url: "myurl", d

我有一个有100多个标记的地图。我向服务器发出了一个Ajax请求,得到了一个包含大量lat、lon值的xml响应。循环这些值,并在地图上用标签添加每个标记。ajax请求和响应很快发生,每个标记都被快速添加到映射中。然后整个页面冻结一段时间。然后标记显示为最大,然后恢复正常。谷歌地图为什么会这样

我的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);
}

我使用了谷歌地图实用程序库ClusterAPI。标记显示在地图上的缩放级别。现在它解决了我的整个页面挂起的问题

以下链接将帮助您使用ClustererAPI


这是因为每次添加标记时都要访问DOM,请查看google maps API,找到冻结更新的方法将所有项目添加到数组中,然后立即全部更新这将解决您的问题。这与一次向下拉列表中添加1000个项目的问题相同。是的,我可以在数组中添加lat、lon值,并立即更新为map。但我需要将每个标记的对应时间显示为每个标记上的标签。那么谷歌API支持在每个标记上添加标签的任何选项吗?你不能仅仅让标记添加到数组中,然后将地图绑定到数组中?我可以添加LAT、Lon以及数组中的时间并绑定到地图吗?应该考虑删除动画。