javascript - 为循环中的所有标记添加标记监听器

Question

我使用 Google Maps Javascript API 制作了一个带有 map 的网站。我使用 PHP 从 Google BigQuery 数据库调用 $rows。我想为 map 上的所有标记添加一个监听器。目前，单击的任何标记都会跳转到最终标记，就好像它循环遍历所有剩余标记到最终标记一样。

foreach ($rows as $row) { 

            ?>
            var contentString = "<h1><?php echo str_replace('"', "'", $row['f'][2]['v']); ?></h1>";
            var infowindow = new google.maps.InfoWindow({
                content: contentString
                });

            var geolocate = new google.maps.LatLng(<?php echo $row['f'][0]['v']; ?> , <?php echo $row['f'][1]['v']; ?>);

            var marker = new google.maps.Marker({
                map: map,
                position: geolocate,
                icon: '/img/Toilet.png',
                title: "<?php echo str_replace('"', "'", $row['f'][2]['v']); ?>"                        //String Replace
                });

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

我想象marker.addListener需要一个指向数组索引的指针，但我无法解决它，我该怎么办？

Answer 1

您可以使用 IIFE 模式。请看一下

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

在这种情况下，您的代码将类似于:

<?php
foreach ($rows as $row) { 
?>
     (function() {
         var contentString = "<h1><?php echo str_replace('"', "'", $row['f'][2]['v']); ?></h1>";
         var infowindow = new google.maps.InfoWindow({
             content: contentString
         });

         var geolocate = new google.maps.LatLng(<?php echo $row['f'][0]['v']; ?> , <?php echo $row['f'][1]['v']; ?>);

         var marker = new google.maps.Marker({
             map: map,
             position: geolocate,
             icon: '/img/Toilet.png',
             title: "<?php echo str_replace('"', "'", $row['f'][2]['v']); ?>"                        //String Replace
            });

         marker.addListener('click', function() {
             infowindow.open(map, marker);
         });
    })();
<?php 
}
?>