Question

我正在使用GMaps JS API3。我有JSON文件，里面有我的位置数据。

我正在努力：

从JSON文件中抓取位置数据（似乎工作正常）
抓住地图的边界（似乎也在起作用）
渲染边界内位置的标记
渲染与边界内标记对应的列表。

我遇到的问题是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，看看是否能解决问题。

Google Javascript API - 如果.each中的语句断开循环

1 个答案: