谷歌地图api v2 -如何处理200-300个标记

Google maps api v2 - how to handle 200-300 hundred markers

本文关键字:处理 200-300个 v2 api 何处理 谷歌地图      更新时间:2023-09-26

你好,我有一个相当大的脚本,所以我不会把它全部张贴在这里,但我真的需要帮助,不知道该怎么做更多…

我在地图上有~300个标记,他们都在同一时间加载,谷歌无法处理或我的脚本无法处理,但我得到"地址找不到"在其中一半,甚至可能更多(其他人正确加载)。但是如果我把它全部删除,一切都会正常工作!

该怎么办?是否有一种方法来加载他们几个在时间一步一步,或者有许多标记处理程序等?(不是marksmanager,我需要在所有缩放级别中都能看到它们)

try with timeout没有帮助!

部分代码:

function initHeadAddress(searchString) {
 if(searchString == 'undefined') {
   map.clearOverlays(); 
   var t = setTimeout("showAddress('Himmelev Bygade 78 B, 4000 Roskilde, Denmark',1,'3T Bygningsentreprise A/S','4000','Roskilde','46328328','null','www.3t.dk',null,null)",1000);
   var t = setTimeout("showAddress('Nørre Allé 51, 7760 Hurup, Denmark',4,'Idealcombi','7760','Hurup','96882500','null','http://www.idealcombi.dk/',null,null)",1000);
    ..... A LOT OF THESE HERE MORE !!!!
   // default one
   showAddress('Denmark', 0, null, null,null,null,null,null,null,searchString);
    } else {
   // if used search function
    showAddress(searchString, 0, null, null,null,null,null,null,null,searchString);
    }
}

ShowAddress功能:

function showAddress(address, markerType, companyname,postnr, by, phone, fax, web, email, searchString) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              //alert("Adresse " +address+ " blev ikke fundet");
              console.log("Adresse " +address+ " blev ikke fundet");
            } else {            
                var myIcon = new GIcon(G_DEFAULT_ICON);
                myIcon.shadow = null;
                myIcon.infoWindowAnchor = new GPoint(9, 2)
                if (markerType == '0') {
                    myIcon.image = '/files/billeder/../Templates/Designs/Ideal2011/images/Map/googleempty.png';
                    myIcon.iconSize = new GSize(18, 18);    
                }
                if (markerType == '1') {
                    myIcon.image = '/files/billeder/../Templates/Designs/Ideal2011/images/Map/googlered.png';
                    myIcon.iconSize = new GSize(18, 18);

                    $('#dotRedCheckbox').click(
                        function(){
                            if(!$(this).hasClass('activeMarker')){
                                marker.hide();
                            } else {
                                marker.show();
                            }
                        }
                    );
                }
                else if (markerType == '2') {
                    myIcon.image = '/files/billeder/../Templates/Designs/Ideal2011/images/Map/googlelblue.png';
                    myIcon.iconSize = new GSize(18, 18);
                    $('#dotlBlueCheckbox').click(
                        function(){
                            if(!$(this).hasClass('activeMarker')){
                                marker.hide();
                            } else {
                                marker.show();
                            }
                        }
                    );
                }
                else if (markerType == '3') {
                    myIcon.image = '/files/billeder/../Templates/Designs/Ideal2011/images/Map/googledblue.png';
                    myIcon.iconSize = new GSize(18 , 18);
                    $('#dotdBlueCheckbox').click(
                        function(){
                            if(!$(this).hasClass('activeMarker')){
                                marker.hide();
                            } else {
                                marker.show();
                            }
                        }
                    );
                }
                else if (markerType == '4') {
                    myIcon.image = '/files/billeder/../Templates/Designs/Ideal2011/images/Map/googlegreen.png';
                    myIcon.iconSize = new GSize(18, 18);
                    $('#dotGreenCheckbox').click(
                        function(){
                            if(!$(this).hasClass('activeMarker')){
                                marker.hide();
                            } else {
                                marker.show();
                            }
                        }
                    );
                }
                var markerOptions = { icon: myIcon };
                var marker = new GMarker(point, markerOptions);
                marker.getPoint();
                if(markerType != 0){        
                    points.push(point);
                    markers.push(marker);       
                }
                if (markerType == 0) {
                    if(searchString == 'undefined'){
                        map.setCenter(point, 6);
                    } else {
                        map.setCenter(point, 13);
                        LatD = point.lat().toFixed(5);
                        LngD = point.lng().toFixed(5);
                        find_closest_marker(LatD, LngD);
                        find_closest_marker2(LatD, LngD);
                        find_closest_marker3(LatD, LngD);
                    }
                } 
                Lat = point.lat().toFixed(5);
                Lng = point.lng().toFixed(5);

                var image = '<img src="http://cbk0.google.com/cbk?output=thumbnail&w=85&h=70&ll='+Lat+','+Lng+'" />'; // alt="'+address+'"
                map.addOverlay(marker);
                if(markerType != 0) {
                    if(fax != "" && fax != null && fax != 'null'){
                        var newfax = "Mob.: "+fax+"<br/>";
                    } else {
                        var newfax = "";    
                    };
                    if(web != "" && web != null && web != 'null'){
                        var newweb = "<a href='"+web+"'>"+web+"</a><br/>";
                    } else {
                        var newweb = "";    
                    };
                    if(postnr != "" && postnr != null && postnr != 'null'){
                        var newpostnr = postnr;
                    } else {
                        var newpostnr = ""; 
                    };
                    if(phone != "" && phone != null && phone != 'null'){
                        var newphone = phone;
                    } else {
                        var newphone = "";  
                    };
                    //address = address.replace("Denmark, ","");
                    //address = address.replace(", Denmark","");
                    //address = address.replace(", 2650 Hvidovre","");
                    //address = address.replace(", Hurup","");
                    //address = address.replace("UK, ","");
                    address2 = address.split(',');
                    address = address2[0];
                    var infoboxInfo = '<div class="infoboxall"><div class="infoboxinfo"><div class="infoboxAddress">'+companyname +"</div>"+ address + '<br/>' + newpostnr + " " + by+ "<br/>" + "Tlf.: " + newphone + "<br/>" + newfax + newweb+"<a href='mailto:"+email+"'>"+email+"</a>"+'</div>' + image+'</div>';
                    //marker.openInfoWindowHtml(address);
                    //GEvent.addListener(marker, 'click',marker.openInfoWindowHtml(address));
                    GEvent.addListener(marker, "click", function()
                    {marker.openInfoWindowHtml(infoboxInfo);});
                    marker.markerType = markerType;
                    marker.title = companyname;
                    marker.address = address;
                    marker.postby = newpostnr+ " " + by;
                    marker.phone = newphone;
                    marker.fax = newfax;
                    marker.web = newweb;
                    marker.email = email;
                }
            }
          }
        );
      }
    }

有人有什么想法吗?如果有5个标记左右,我说脚本是如何工作的……但是当全部插入时只显示其中的一部分?想法?

是的,你可以这样做,就像我在以前的项目中从数据库加载标记一样(我在这个项目中使用API v3,但概念是相同的)。由于API同时接受来自同一IP的5个请求,我做了一个"标记队列"。当由于API返回错误而无法放置标记时,我将其放入队列中,每隔一秒钟左右,我尝试从队列中添加下一个标记,直到队列为空。

请查看前面链接中的"gmaps3.js"源代码,看看我是如何做到的。如果你有更多问题,请告诉我。

根据Google的说法,版本2的API已经被弃用,你应该开始使用版本3。一个很大的好处是,你不再需要一个特定于域的"API密钥",事实上,你根本不需要一个API密钥版本3。

我认为它比版本2更简单,更干净。如果您熟悉jQuery和jQuery插件,那么您将真正喜欢使用Map API版本3。