javascript - Google map API 未显示所有标记

Question

我正在为特性搜索系统开发 API，并尝试让特性在 Google map 上显示为标记。 API 一切正常，我得到了有效的响应，正是我正在寻找和期望得到的。我遇到的问题是标记。

我将响应限制为 100 个属性，并要求它们具有要进行地理编码的信息。我获得 100 个属性，并且可以循环遍历并列出所有属性，但我在 map 上最多只能获得 11 个标记。根本不改变条件并再次搜索应该返回相同的结果，但我得到了一组不同的标记。再次搜索，我得到一个标记。

我也遇到了标记变量的问题。我已将其设置为加载时的空数组，然后将每个属性的标记插入其中，但当我通过控制台记录该数组时，它始终为空。

这是完整的 JavaScript:

<script>
    var user    = "bac0Fmk5";
    var key     = "Vkjx5BV8VeYOxAixFD";
    var secret  = "CU5g6wQR2ZJV7";

    var markers = [];

$(document).ready(function(){
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(30.1767, -85.8056),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }); 

    var geocoder =  new google.maps.Geocoder();

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

    $('#search_btn').click(function(){
        clearOverlays();

        $.ajax({
            type: 'POST',
            dataType: "json",
            async: false,
            url: "api/ex.api.php",
            data: {
                user:           user,
                key:            key,
                secret:         secret,
                area:           $('#area').val(),
                category:       $('#type').val(),
                min_price:      $('#min_price').val(),
                max_price:      $('#max_price').val(),
                bedrooms:       $('#bedrooms').val(),
                bathrooms:      $('#bathrooms').val(),
                subdivision:    $('#subdivision').val(),
                city:           $('#city').val(),
                mls_acct:       $('#mls_acct').val()
            },
            success: function (responseData, textStatus, jqXHR) {
                // console.log(responseData);
                // console.log(jqXHR);
                $.each(jqXHR.responseJSON, function(i, e){
                    //console.log(e.mls_acct);

                    geocoder.geocode( { 'address': e.street_num+' '+e.street_name+' '+e.city+','+e.state+' '+e.zip}, function(results, status) {
                          if (status == google.maps.GeocoderStatus.OK) {
                            // console.log("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng()); 
                            var lat = results[0].geometry.location.lat();
                            var lng = results[0].geometry.location.lng();
                            //window.locs.push([lat, lng]);

                            if(e.street_num == '' || e.street_name == '' || e.city == '' || e.state == '' || e.zip == '')
                            {
                                console.log('got a dead one');
                            }

                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(lat, lng),
                                map: map
                            });
                            markers.push(marker);

                            bindInfoWindow(marker, map, infowindow, "<div><h2>"+e.mls_acct+"</h2></div>");
                        }
                    });
                });
            },
            error: function (responseData, textStatus, errorThrown) {
                console.log('Response Data: ' + responseData);
                console.log('Status: ' + textStatus);
                console.log('Error Thrown: ' + errorThrown);
            }
        });

        return false;
    });
});

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

function clearOverlays() {
  for (var i = 0; i < markers.length; i++ ) {
    markers[i].setMap(null);
  }
  markers.length = 0;
}
</script>

Answer 1

当 GeocoderStatus 不“正常”时，您会默默地忽略它。您可能收到 OVER_QUERY_LIMIT 条回复。添加警报，至少让您知道失败的原因:

                geocoder.geocode( { 'address': e.street_num+' '+e.street_name+' '+e.city+','+e.state+' '+e.zip}, function(results, status) {
                      if (status == google.maps.GeocoderStatus.OK) {
                        // console.log("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng()); 
                        var lat = results[0].geometry.location.lat();
                        var lng = results[0].geometry.location.lng();
                        //window.locs.push([lat, lng]);

                        if(e.street_num == '' || e.street_name == '' || e.city == '' || e.state == '' || e.zip == '')
                        {
                            console.log('got a dead one');
                        }

                        marker = new google.maps.Marker({
                            position: new google.maps.LatLng(lat, lng),
                            map: map
                        });
                        markers.push(marker);

                        bindInfoWindow(marker, map, infowindow, "<div><h2>"+e.mls_acct+"</h2></div>");
                    } else alert("Geocode failed, status="+status);
                });