Google Javascript API - .each 中的 If 语句打破循环

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 将 hoisted 置于函数的顶部，所以当你这样做时，if 是 false

highlighter(marker);

你真的在做

highlighter(undefined);

我想在那个函数中，在某个时候它会尝试访问一些属性，并且它会抛出一个 Uncaught TypeError 或类似的东西。

我会先尝试将highlighter(marker) 移动到您的if 中，看看是否能解决问题。