javascript - 每个标记的 InfoBox (getElementById) – Google Maps API 3

Question

我将 Google Maps API v3 与 InfoBox 结合使用，以便设置点击标记时出现的弹出窗口的样式。

这是我的信息框设置:

// New InfoWindow
infobox = new InfoBox({
    content: document.getElementById('marker-info'),
    disableAutoPan: false,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    closeBoxMargin: '10px 9px 12px 0',
    closeBoxURL: siteURL + 'wp-content/themes/bmk-wp-build/img/close-google-popup.png',
    infoBoxClearance: new google.maps.Size(1, 1)
});

我有一个带有许多标记的 Google map ，它是使用 ACF 和 Locations 字段通过 Wordpress 设置的。一切正常，但唯一的问题是 InfoBox 为每个标记输出相同的内容。这显然与这一行有关:

content: document.getElementById('marker-info'),

这是我的 PHP/HTML:

<?php while ( $company_query->have_posts() ) : $company_query->the_post(); ?>
<?php $location = get_field('location'); if ( !empty($location) ) : ?>
    <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>" id="<?php echo get_the_ID(); ?>">
        <div id="marker-info" class="marker-info <?php echo get_the_ID(); ?>">
            <?php echo wp_get_attachment_image(get_field('logo'), 'full'); ?>
        </div>
    </div>
<?php endif; ?>
<?php endwhile; ?>

显然，在 while 循环中设置 id 是个坏主意，而且很愚蠢，所以我显然可以摆脱它，但我该如何改变:

content: document.getElementById('marker-info'),

获取每个标记的每个信息框的每个 .marker-info？

Answer 1

我用这个...解决了这个问题

google.maps.event.addListener(marker, 'click', function() {
    console.log( $marker.children().html() );

    infobox.open(map,marker);
    infobox.setContent($marker.children().html());

});