javascript - 使用 jQuery 迭代表并根据元素值创建新变量

Question

我已经使用 JavaScript 迭代了一个表格，因此我可以使用数据作为变量在 Google map 上创建标记。我的 map 和迭代表的代码都可以工作，但我无法弄清楚如何使 gridmap 值在我的 marker 变量中可用。我假设我需要围绕我的标记变量做一个 for 循环，我可能可以弄清楚，我只是简单地坚持获取我的元素变量，并将它们用作我的标记的变量。下面是我的代码，如果这有意义的话。我已经在这呆了好几个小时了，现在是凌晨 3:30；如果需要的话，我会在早上重新讨论这个问题。谢谢。

这是更新后的工作代码:

我迭代了 DOM，仅从 <tr> 中获取 tbody 元素。请注意 tr:gt(0) 部分 - 这会跳过第一个标题行。然后，我通过根据 markers 数组过滤出 gdata 来创建一个新数组。我仍然需要清理一下，添加更多功能，例如集群，但我现在非常高兴，希望这对其他人有帮助。

<script>
    function initMap() {
        var map;

        var table = $("table");
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var labelIndex = 0;
        var htmlLabel = labels.split(""); // Add Labels to Html Columns for Matching

        var gdata = new Array();

        $("table tbody tr:gt(0)").each(function (i) {
            gdata[i] = new Array();
            $(this).children('td').each(function (ii) {
                gdata[i][ii] = $(this).text();
            });
        });

        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            mapTypeId: 'satellite',
            disableDefaultUI: true,
            scrollwheel: false,
            draggable: true
        };

        // Display a map on the page
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        map.setTilt(45);

        // Multiple Markers
        var markers = [
            ['a0', 32.840801, -117.244842],
            ['a10', 32.840801, -117.244842],
            ['a20', 32.840777, -117.244864],
            ['a30', 32.840758, -117.244881],
            ['a40', 32.840732, -117.244899],
            ['aa0', 32.840828, -117.244794],
            ['aa10', 32.840828, -117.244794],
            ['b0', 32.840624, -117.24493],
            ['b10', 32.840624, -117.24493],
            ['b20', 32.840594, -117.244928],
            ['b30', 32.840567, -117.244924],
            ['b40', 32.840544, -117.244918],
            ['b60', 32.840544, -117.244918],
            ['bb0', 32.840495, -117.244897],
            ['bb10', 32.840495, -117.244897],
            ['bb20', 32.840468, -117.244885],
            ['c0', 32.84082, -117.244712],
            ['c10', 32.84082, -117.244712],
            ['c20', 32.840815, -117.244729],
            ['c30', 32.840806, -117.244749],
            ['c40', 32.840793, -117.244767],
            ['c50', 32.840779, -117.244789],
            ['c70', 32.840755, -117.244816],
            ['cc0', 32.840828, -117.244661],
            ['cc10', 32.840828, -117.244661],
            ['d0', 32.840607, -117.244867],
            ['d10', 32.840607, -117.244867],
            ['d20', 32.840586, -117.24486],
            ['d30', 32.840567, -117.244856],
            ['d40', 32.840543, -117.244841],
            ['d50', 32.840514, -117.244824],
            ['dd0', 32.84046, -117.244774],
            ['dd10', 32.84046, -117.244774],
            ['e0', 32.840788, -117.244598],
            ['e10', 32.840788, -117.244598],
            ['e20', 32.840791, -117.24462],
            ['e30', 32.840788, -117.244644],
            ['e40', 32.840787, -117.244665],
            ['e50', 32.840783, -117.244687],
            ['e60', 32.84078, -117.244707],
            ['e70', 32.840769, -117.244729],
            ['ee0', 32.84078, -117.244539],
            ['ee10', 32.84078, -117.244539],
            ['f10', 32.840607, -117.244809],
            ['f20', 32.840586, -117.244802],
            ['f30', 32.840564, -117.244785],
            ['f40', 32.840543, -117.244765],
            ['f50', 32.840532, -117.244749],
            ['f60', 32.840519, -117.244731],
            ['f70', 32.840508, -117.244714],
            ['ff0', 32.840473, -117.244632],
            ['ff10', 32.840473, -117.244632],
            ['g0', 32.840709, -117.244468],
            ['g10', 32.840709, -117.244468],
            ['g20', 32.840718, -117.244484],
            ['g30', 32.840737, -117.244499],
            ['g40', 32.840739, -117.244515],
            ['g50', 32.840747, -117.244531],
            ['h0', 32.840681, -117.244569],
            ['h10', 32.840681, -117.244569],
            ['h20', 32.840707, -117.244574],
            ['i0', 32.840611, -117.24458],
            ['i10', 32.840611, -117.24458],
            ['i20', 32.840576, -117.24461]
        ];


        var filteredMarkers = []; // the results array

        for (var iii = 0; iii < gdata.length; iii++) // iterate for every marker key
        {
            filteredMarkers = filteredMarkers.concat(markers.filter(function (item) {
                return item[0] == gdata[iii][0];
            }));
        }
        console.log(filteredMarkers);
        console.log(gdata);
        console.log(markers);


        // Info Window Content
        var infoWindowContent = [
            ['<div class="">' +
            '<h3>Add Code Here</h3>' +
            '<p>Add Code Here</p>' + '</div>']
        ];

        // Display multiple markers on a map
        var infoWindow = new google.maps.InfoWindow(), marker, i;

        for (i = 0; i < filteredMarkers.length; i++) {
            var position = new google.maps.LatLng(filteredMarkers[i][1], filteredMarkers[i][2]);
            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: filteredMarkers[i][0],
                label: labels[labelIndex++ % labels.length]
            });

            // Allow each marker to have an info window
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infoWindow.setContent(infoWindowContent[i][0]);
                    infoWindow.open(map, marker);
                }
            })(marker, i));

            // Automatically center the map fitting all markers on the screen
            map.fitBounds(bounds);
        }

        // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
            this.setZoom(24);
            google.maps.event.removeListener(boundsListener);
        });
    }
</script>

Answer 1

看来您也在使用 Angular，并且 id='gridmap' div 返回的是对象名称而不是内容。 div 内容的性质看起来像是问题的症结所在，因此建议查看这个问题:How to show object property with Angularjs

从这里开始，如果您可以在 Angular 完成其工作后生成如下所示的 HTML，通过将其元素插入数据标记来使属性不可见:

<tr>
   <td> ..... </td>
   <td> ..... </td>
   <td> ..... </td>
   <td class='gridmap' data-lat='23.424' data-lng='-117.233'>a0</td>
</tr>

如果插入包含大括号的整个对象，则可能需要执行额外的 JSON 字符串化和解析，此时最好避免这样做。

请注意，HTML id 标签只能用于唯一的 DOM 元素，因此如果您有多个表格行，它应该是一个类(这也意味着相应地调整您的 css)

现在我们可以使用jquery data询问相同的 HTML 单元格标记并传递给 grLat 和 grLng 变量:

    $('tr').each(function (i) {
        var $tds = $(this).find('td').eq(8), // moved the eq(8) here
            gLabel = htmlLabel[i],
            gridmap = $tds.text(),
            grLat = Number($tds.data('lat')), // get the lat data
            grLng = Number($tds.data('lng')); // get the lng data

        console.log(
            'Marker:' + gLabel
            + '\nRow:' + (i + 1)
            + '\nGrid Map: ' + gridmap
            + '\nGrid lat: ' + grLat
            + '\nGrid lng: ' + grLng   // check components
        );

        var marker = new google.maps.Marker({
            position: {lat: grLat, lng:grLng}, // recomposed object
            map: map,
            label: labels[labelIndex++ % labels.length],
            animation: google.maps.Animation.DROP

        });
    })

这应该会让你处于更好的调试位置