Google Javascript API - оператор If в .each прерывает цикл

Question

Я работаю с GMaps JS API3. У меня есть файл JSON с моими данными о местоположении.

Я пытаюсь:

1. Получить данные о местоположении из файла JSON (кажется, работает нормально)
2. Захватите границы карты (тоже вроде работает)
3. Визуализация маркеров для местоположений, которые находятся внутри границ
4. Отображать списки, соответствующие маркерам, находящимся внутри границ.

Проблема, с которой я сталкиваюсь, заключается в том, что когда оператор if:

if(bounds.contains(resPosition)) {...}

возвращает false в любой точке, цикл $ .each, в котором он содержится, кажется, просто прекращает цикл по остальным результатам. Я, наверное, здесь упускаю что-то глупое, но кто-нибудь может мне помочь с диагностикой?

function getLocationData() {

var markerIcon = {
  url: markerIconURI,
  size: new google.maps.Size(30,35),
  scaledSize: new google.maps.Size(30,35),
  anchor: new google.maps.Point(15, 35),
  labelOrigin: new google.maps.Point(15,13.5)
};

google.maps.event.addListener(map, 'idle', function() {
    $.ajax({
        url: locationList,
        dataType: 'json',
        type: 'get',
        cache: false,
        error: function() {
            console.log("Can't import location data.");
        },
        success: function(data) {
            $("ul.wm_section--dealer-locator__result-list").empty();
            markers = [];
            var bounds = map.getBounds();
            var locationNumber = 1;

            $(data.location).each(function(key, value) {

                var markerLabel = parseFloat(value.id) + parseFloat(1); //add 1 to the object id
                var resPosition = {lat: parseFloat(value.lat), lng: parseFloat(value.lng)};

                if( bounds.contains(resPosition) ) {

                    var marker = new google.maps.Marker({
                        map: map,
                        position: {lat: parseFloat(value.lat), lng: parseFloat(value.lng)},
                        title: value.title,
                        markerID: value.id,
                        icon: markerIcon,
                        label: {
                            text: "0"+locationNumber,
                            color: "#000",
                            fontSize: "16px",
                            fontWeight: "bold",
                            fontFamily: "condiut-light,Helvetica,Arial,sans-serif",
                            position: "relative",
                            top: "-5px"
                          }

                    }); //eo new marker


                    if (value.isPreferred === 'true') {
                        $("ul.wm_section--dealer-locator__result-list").append('<li id="marker-' + value.id + '" class="wm_card--dealer-locator masters-club"><h6 class="wm_card--dealer-locator__number">0' + locationNumber + '<h6 class="wm_card--dealer-locator__title">' + value.title + '</h6><p class="wm_card--dealer-locator__address">' + value.address + ', ' + value.city + ', ' + value.state + ', ' + value.zip + '</p><p class="wm_card--dealer-locator__phone">Call ' + value.phone + '</p><a class="wm_card--dealer-locator__button" href="#">Contact Me</a><img class="wm_masters-club-image" src="assets/images/masters.jpg"/></li>');
                        console.log("preferred fired");
                    } else {
                        $("ul.wm_section--dealer-locator__result-list").append('<li id="marker-' + value.id + '" class="wm_card--dealer-locator"><h6 class="wm_card--dealer-locator__number">0' + locationNumber + '<h6 class="wm_card--dealer-locator__title">' + value.title + '</h6><p class="wm_card--dealer-locator__address">' + value.address + ', ' + value.city + ', ' + value.state + ', ' + value.zip + '</p><p class="wm_card--dealer-locator__phone">Call ' + value.phone + '</p><a class="wm_card--dealer-locator__button" href="#">Contact Me</a></li>');
                        console.log("standard fired");
                    }
                    markers.push(marker); //push all markers into an array
                    console.log("markers: " + markers);
                }


                locationNumber++;
                highlighter(marker); //call ui interactivity

            }); // eo data.location each
        } // eo .ajax:success
    }); // eo .ajax
  }); // eo gmaps listener
} //eo getlocationdata()

Answer 1

Это немного догадка, так как я не вижу код для highlighter, но я думаю, что проблема связана с этим:

if( bounds.contains(resPosition) ) {
     var marker = new google.maps.Marker({
       // ...
     });
     // ...
}
highlighter(marker);

marker получает подъем на вершину функции, поэтому if равно false, когда вы делаете

highlighter(marker);

вы действительно делаете

highlighter(undefined);

Я бы предположил, что в этой функции в какой-то момент она пытается получить доступ к какому-либо свойству и выбрасывает Uncaught TypeError или что-то подобное.

Сначала я бы попробовал переместить highlighter(marker) внутрь вашего if и посмотреть, исправит ли это.