0

我知道已经发布了类似的问题，但我没有找到并回答其中任何一个问题，因为它与我的特定问题有关。

我有一个使用谷歌地图将客户邮政编码放在地图上的 javascript。我遇到的问题与其他人已经发布的问题相似——我收到“超出查询限制”错误。

我尝试使用 setTimeOut 进行不同的设置，以尝试在允许的时间间隔内向谷歌发送数据，但我无法让它工作。

这是我的行动：

        function initialize() 
        {
            var rowNum      = 0 ; 
            var rowColor    = "" ;

            var latlng      = new google.maps.LatLng(27.91425, -82.842617);             

            var myOptions   = 
            {
                zoom: 7,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map             = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

            geocoder        = new google.maps.Geocoder();

            data.forEach(function(mapData,idx) 
            {       
                window.setTimeout(function() 
                { 
                    geocoder.geocode({ 'address': mapData.address}, function(results, status) 
                    {                   
                        if (status == google.maps.GeocoderStatus.OK) 
                        {
                            var marker = new google.maps.Marker({
                            map: map, 
                            position: results[0].geometry.location,
                            title: mapData.title,
                            icon: getIcon(mapData.type)
                        });

                        var contentHtml = "<div style='width:250px;height:90px'><strong>"+mapData.title+"</strong><br />"+mapData.address+"</div>";

                        var infowindow = new google.maps.InfoWindow({
                            content: contentHtml
                        });

                        google.maps.event.addListener(marker, 'click', function() 
                        {
                          infowindow.open(map,marker);
                        });

                        marker.locid = idx+1;
                        marker.infowindow = infowindow;
                        markers[markers.length] = marker;

                        if (idx%2 == 0)
                        {
                            rowColor = 'style="background-color:#00FFFF;"' ; 
                        }
                        else
                        {
                            rowColor = 'style="background-color:#FFFFFF;"' ; 
                        }

                        var sideHtml = '<div ' + rowColor + ' class="loc" data-locid="'+marker.locid+'"><b>'+mapData.title+'</b><br/>';
                             sideHtml += mapData.address + '</div>';
                             $("#locs").append(sideHtml); 

                        //Are we all done? Not 100% sure of this
                        if(markers.length == data.length) doFilter();
                    } 
                    else 
                    {
                        // alert("Geocode was not successful for the following reason: " + status);
                    }   
                }, 3000);                   
            });                             
        });

当我使用此操作运行我的页面时，我得到了 11 个标记，即使我的 JSON 字符串中的标记远不止这些。window.setTimeout 完全没有效果——我显然在这里做错了什么。

对于此事，我将不胜感激。

谢谢，

4

1 回答 1

2

我找到了我的问题的答案。我在网上找到了以下代码，并根据我的需要进行了修改。

有了它，您可以加载许多标记，而不会从 Google 获得 Over Query Limit。

我已经用 100 多个标记对其进行了测试，并且效果很好。该页面根本不会冻结。

我确信你们中的一些人可以做一些更优雅和高效的事情，但这是一个很好的起点。

<script type="text/javascript">
    //<![CDATA[    

// display ani gif
    loadingGMap() ; 

 // delay between geocode requests - at the time of writing, 100 miliseconds seems to work well
      var delay = 100;

    // ====== Create map objects ======
        var infowindow = new google.maps.InfoWindow();
    var latlng = new google.maps.LatLng(27.989551,-82.462235);

    var mapOptions = 
    {
        zoom: 7,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var geo         = new google.maps.Geocoder(); 
    var map     = new google.maps.Map(document.getElementById("map"), mapOptions);
    var bounds  = new google.maps.LatLngBounds();

    // ====== Geocoding ======
    function getAddress(search, next) 
    {
        geo.geocode({address:search}, function (results,status)
        { 
            // If that was successful
            if (status == google.maps.GeocoderStatus.OK) 
            {
                // Lets assume that the first marker is the one we want
                var p   = results[0].geometry.location;
                var lat = p.lat();
                var lng = p.lng();

                // Output the data
                var msg = 'address="' + search + '" lat=' +lat+ ' lng=' +lng+ '(delay='+delay+'ms)<br>';
                //document.getElementById("messages").innerHTML += msg;
                // Create a marker

                createMarker(search,lat,lng);
            }
            // ====== Decode the error status ======
            else 
            {
                // === if we were sending the requests to fast, try this one again and increase the delay
                if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) 
                {
                    nextAddress--;
                    delay++;
                } 
                else 
                {
                    var reason  =   "Code "+status;
                    var msg     = 'address="' + search + '" error=' +reason+ '(delay='+delay+'ms)<br>';
                    // document.getElementById("messages").innerHTML += msg;
                }   
            }
            next();
        }
    );
}

// ======= Function to create a marker
function createMarker(add,lat,lng) 
{
    var contentString   = add;  

    if (add=='EOF') 
    {
        stopLoadingGMap() ; 
    }

    var addArray        = add.split(' ');       
    var zipcode         = addArray.pop();
    var zipcode         = add.match(/\d{5}/)[0] ;       

    var image           = 'icons/sm_02.png';        
    var marker          = new MarkerWithLabel(
    {
            position: new google.maps.LatLng(lat,lng),
        map: map,
        icon: image,
        labelContent: zipcode,
        labelAnchor: new google.maps.Point(50, 0),
         labelClass: "labels", // the CSS class for the label
         labelStyle: {opacity: 0.75},           
        zIndex: Math.round(latlng.lat()*-100000)<<5
    });

    google.maps.event.addListener(marker, 'click', function() 
    {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
    });

    bounds.extend(marker.position);
}

// ======= An array of locations that we want to Geocode ========
// use static or build dynamically
// use as many markers as you need – I’ve test with over 100
var addresses = var data = [
{‘StreetAddress1 City State Zipcode’},
    {‘StreetAddress2 City State Zipcode’},
    {‘StreetAddress3 City State Zipcode’},
    {‘StreetAddress14 City State Zipcode’},
…
    {‘EOF’},
    ];

// ======= Global variable to remind us what to do next
var nextAddress = 0;

// ======= Function to call the next Geocode operation when the reply comes back
function theNext() 
{
    if (nextAddress < addresses.length) 
    {
        setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
        nextAddress++;
         } 
    else 
    {
        // We're done. Show map bounds
        map.fitBounds(bounds);
            }
}

// ======= Call that function for the first time =======
theNext();

// This Javascript is based on code provided by the
 // Community Church Javascript Team
 // http://www.bisphamchurch.org.uk/   
 // http://econym.org.uk/gmap/

    //]]>
    </script>
于 2013-05-25T21:39:59.280 回答