Question

我正在研究Google Place API文档，并试图获取一个脚本来从网页中提取PlaceID，并将其替换为Google Place API的输出。

通过复制代码并更改变量和函数名称，我设法从多个地方ID成功获取输出，但是现在我试图创建一个循环函数，以便不复制代码。以下是我所拥有的，但出现错误。通过查看控制台，它似乎可以正常工作，直到回调函数停止工作为止。

“未捕获的TypeError：无法将属性'innerHTML'设置为null 在回调（places.html：29）”

我已经尝试了一些方法，但是到目前为止还没有运气。任何建议，将不胜感激。谢谢，

<body>
<div id="MY0">ChIJaZ6Hg4iAhYARxTsHnDFJ9zE</div>
<div id="MY1">ChIJT9e323V644kRR6TiEnwcOlA</div>

<script>
    var request = [];
    var service = [];
    var div = [];
    for (i = 0; i < 2; i++) {
      request[i] = {
      placeId: document.getElementById("MY" + i).innerHTML,
      fields: ['name', 'rating', 'formatted_phone_number', 'geometry', 'reviews', 'photos'],
    };

    service[i] = new google.maps.places.PlacesService(document.createElement('div'));
    service[i].getDetails(request[i], callback);

    function callback(place, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
          div[i] = document.getElementById("MY" + i);
          div[i].innerHTML = "<b>" + place.name + "</b><br>" + place.rating + "<br>" + place.reviews[1].author_name + "<br>" + place.reviews[1].rating + "<br>" + place.reviews[1].text + "<br><img src='" + place.photos[0].getUrl({'maxWidth': 250, 'maxHeight': 250}) + "'>";
      }
    }
    }

</script>
</body>

Answer 1

将回调移到for循环之外，然后忽略名为div的数组（除非您需要此...如果这样我将进行重写）。 for循环在getDetails（）调用返回任何结果之前正在执行，因为该调用是异步的-由于您对Google Places回调没有太多控制权，因此我会将ID保存在数组中，然后使用他们在回调中，就像这样：

function gp_callback(place, status) {
    var el = document.getElementById(window.id_set[0]); // first in first out - the for loop should populate the IDs in correct order
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        el.innerHTML = "<b>" + place.name + "</b><br>" + place.rating + "<br>" + place.reviews[1].author_name + "<br>" + place.reviews[1].rating + "<br>" + place.reviews[1].text + "<br><img src='" + place.photos[0].getUrl({'maxWidth': 250, 'maxHeight': 250}) + "'>";
    }
    if (window.id_set.length > 1) {
        window.id_set.splice(0, 1); // remove first element from array because has been used - now the next element is at index 0 for the next async callback
    }
}


var request = [];
var service = [];
var id_set = [];
for (i = 0; i < 2; i++) {
    request[i] = {
        placeId: document.getElementById("MY" + i).innerHTML,
        fields: ['name', 'rating', 'formatted_phone_number', 'geometry', 'reviews', 'photos'],
    };

    id_set.push("MY" + i); // this ensures array is populated (in proper order, b/c it tracks the execution of the for loop) for use in callback before callback is called (since getDetails() is async)

    service[i] = new google.maps.places.PlacesService(document.createElement('div'));
    service[i].getDetails(request[i], function(place, status) {
        gp_callback(place, status);
    });
}

更新：在我有更多时间考虑它之后，答案更加可扩展且优雅。

<div id="MY0" class="gp_container">ChIJaZ6Hg4iAhYARxTsHnDFJ9zE</div>
<div id="MY1" class="gp_container">ChIJT9e323V644kRR6TiEnwcOlA</div>
.
.
.
<div id="MYN" class="gp_container">fvbfsvkjfbvkfvb</div> // the nth div

<script>
    function populate_container(place, status, container_id) {
        var el = document.getElementById(container_id);
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            el.innerHTML = "<b>" + place.name + "</b><br>" + place.rating + "<br>" + place.reviews[1].author_name + "<br>" + place.reviews[1].rating + "<br>" + place.reviews[1].text + "<br><img src='" + place.photos[0].getUrl({'maxWidth': 250, 'maxHeight': 250}) + "'>";
        }
    }

    function call_service(id_request_map) {
        var i, container_id, request,
            service_call = function(container_id, request) {
                var service = new google.maps.places.PlacesService(document.createElement('div'));
                service.getDetails(request, function(place, status) {
                    populate_container(place, status, container_id);
                });
            };
        for(i in id_request_map) {
            service_call(i, id_request_map[i]);
        }
    }

    $(document).ready(function() {

        var request, container_id,
            id_request_map = {},
            container_length = document.getElementsByClassName("gp_container").length,
            i = 0;

        for (; i < container_length; i++) {

            container_id = "MY" + i;

            request = {
                placeId: document.getElementById(container_id).innerHTML,
                fields: ['name', 'rating', 'formatted_phone_number', 'geometry', 'reviews', 'photos'],
            };


            id_request_map[container_id] = request; // build the association map
        }

        call_service(id_request_map);
    });
</script>

循环浏览Google Place API的场所详细信息

1 个答案: