Google Maps API - 在单页上运行 11 次后停止

Question

我正在浏览我在 wordpress 上的帖子，并让它们显示在谷歌地图上，但是当它到达列表中的第 12 位时，它会抛出一个错误，列表中的第 12 位没有设置任何不同于休息。我已经删除了 12 号并用新的替换。

function initMap() {
    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById('club-map'), {
        zoom: 14,
        center: { lat: 41.383682, lng: 2.176591 },
        styles: [{elementType:"geometry",stylers:[{color:"#212121"}]},{elementType:"labels.icon",stylers:[{visibility:"off"}]},{elementType:"labels.text.fill",stylers:[{color:"#757575"}]},{elementType:"labels.text.stroke",stylers:[{color:"#212121"}]},{featureType:"administrative",elementType:"geometry",stylers:[{color:"#757575"}]},{featureType:"administrative.country",elementType:"labels.text.fill",stylers:[{color:"#9e9e9e"}]},{featureType:"administrative.land_parcel",stylers:[{visibility:"off"}]},{featureType:"administrative.locality",elementType:"labels.text.fill",stylers:[{color:"#bdbdbd"}]},{featureType:"poi",elementType:"labels.text.fill",stylers:[{color:"#757575"}]},{featureType:"poi.park",elementType:"geometry",stylers:[{color:"#181818"}]},{featureType:"poi.park",elementType:"labels.text.fill",stylers:[{color:"#616161"}]},{featureType:"poi.park",elementType:"labels.text.stroke",stylers:[{color:"#1b1b1b"}]},{featureType:"road",elementType:"geometry.fill",stylers:[{color:"#2c2c2c"}]},{featureType:"road",elementType:"labels.text.fill",stylers:[{color:"#8a8a8a"}]},{featureType:"road.arterial",elementType:"geometry",stylers:[{color:"#373737"}]},{featureType:"road.highway",elementType:"geometry",stylers:[{color:"#3c3c3c"}]},{featureType:"road.highway.controlled_access",elementType:"geometry",stylers:[{color:"#4e4e4e"}]},{featureType:"road.local",elementType:"labels.text.fill",stylers:[{color:"#616161"}]},{featureType:"transit",elementType:"labels.text.fill",stylers:[{color:"#757575"}]},{featureType:"water",elementType:"geometry",stylers:[{color:"#000000"}]},{featureType:"water",elementType:"labels.text.fill",stylers:[{color:"#3d3d3d"}]}]
    });

    var address;
    <?php
        // Add club pins
        $args = array( 'post_type' => 'clubs', 'posts_per_page' => '25','nopaging' => true, 'order' => 'ASC');
        $wp_query = new WP_Query($args);
        while(have_posts()){
            the_post();
    ?>
        address = "<?= get_field('address'); ?>";
            geocoder.geocode( { 'address': address}, function(results, status){
            console.log('result');
            console.log(results);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                icon: '<?= get_template_directory_uri(); ?>/dist/images/map-pin.png',
                animation: google.maps.Animation.DROP,
                clubId: <?= get_the_ID(); ?>,
                name: '<?= addslashes(get_the_title()); ?>',
                age: <?= get_field('age_requirement'); ?>,
                logo: '<?= get_field('club_logo'); ?>',
                cost: '<?= number_format(get_field('membership_cost'), 2); ?>',
                rating: <?= get_field('rating'); ?>
            });

            google.maps.event.addListener(marker, 'click', function(){
                clubDetails(marker.clubId,marker.name,marker.age,marker.logo,marker.cost,marker.rating);
            });

            var infowindow =  new google.maps.InfoWindow({
                content: '<?= addslashes(get_the_title()); ?>',
                map: map,
                // position: homeLatlng
            });

            marker.addListener('mouseover', function() {
                infowindow.open(map, this);
            });

            marker.addListener('mouseout', function() {
                infowindow.close();
            })
        });
    <?php } ?>
 }

我在控制台中收到此错误

(index):987 Uncaught TypeError: Cannot read property '0' of null
    at (index):987
    at geocoder.js:5
    at FU (geocoder.js:3)
    at Object.HU.geocode (geocoder.js:5)
    at Array.<anonymous> (js?key=AIzaSyAgDZJic9rlx9ZV9PRynFo76d9gSlAE-UY&callback=initMap:133)
    at js?key=AIzaSyAgDZJic9rlx9ZV9PRynFo76d9gSlAE-UY&callback=initMap:124
    at Object.<anonymous> (js?key=AIzaSyAgDZJic9rlx9ZV9PRynFo76d9gSlAE-UY&callback=initMap:62)
    at js?key=AIzaSyAgDZJic9rlx9ZV9PRynFo76d9gSlAE-UY&callback=initMap:124
    at js?key=AIzaSyAgDZJic9rlx9ZV9PRynFo76d9gSlAE-UY&callback=initMap:62
    at js?key=AIzaSyAgDZJic9rlx9ZV9PRynFo76d9gSlAE-UY&callback=initMap:124

这也是它所指向的线

position: results[0].geometry.location,

编辑

这是我的console.log(results) 的样子，它还包括错误https://gyazo.com/b3c91e3feb34ea61068bb1e0102ec554

编辑 V2

我已经注释掉了 //position: results[0].geometry.location, 并且在它运行了 11 次之后它只是没有返回结果

Answer 1

我已经修改了 GeoCoder 方法部分，用你的代码替换这个检查一次，如果有，请告诉我，

geocoder.geocode( { 'address': address}, function(results, status) {

    var markers = results.map(function(location, i) {

        var marker = new google.maps.Marker({
            map: map,
            position: location.geometry.location,
            icon: '<?= get_template_directory_uri(); ?>/dist/images/map-pin.png',
            animation: google.maps.Animation.DROP,
            clubId: <?= get_the_ID(); ?>,
            name: '<?= addslashes(get_the_title()); ?>',
            age: <?= get_field('age_requirement'); ?>,
            logo: '<?= get_field('club_logo'); ?>',
            cost: '<?= number_format(get_field('membership_cost'), 2); ?>',
            rating: <?= get_field('rating'); ?>
        });

        var infowindow = new google.maps.InfoWindow({
            content: '<?= addslashes(get_the_title()); ?>',
        });

        google.maps.event.addListener(infowindow, 'domready', function() {

            var iwOuter = jQuery('.gm-style-iw');

            // Reference to the div that groups the close button elements.
            var iwCloseBtn = iwOuter.next();

            // Apply the desired effect to the close button
            iwCloseBtn.remove()
        });

        marker.addListener('mouseover', function() {
            infowindow.open(map, this);
        });

        marker.addListener('mouseout', function() {
            infowindow.close();
        })

        return marker;
    }); 
});