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

Question

我正在使用带有 InfoBox 的 Google Maps API v3 来设置单击标记时出现的弹出窗口的样式。

这是我的信息框设置：

// 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)
});

我有一个带有许多标记的谷歌地图，它是通过 Wordpress 使用 ACF 和 Locations 字段设置的。一切正常，但唯一的问题是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'),

获取每个标记的每个 InfoBox 的每个 .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());

});

Answer 2

为什么不在任何地方都使用同一个 InfoBox，并且最初声明它时不使用 content 选项？如果我理解正确，您可以为每个标记设置一个事件处理程序，并将回调设置为使用一个信息框。 类似于以下内容：

var markers = document.getElementsByClassName('marker');
for( var i = 0; i < markers.length; i++ ) {
    google.maps.event.addDomListener(markers[i], 'click', function() {
         infobox.setContent(this.children[0]);
         infobox.open(map);
    });
}

有了这个，您可能可以完全摆脱使用 ID。如果你想保留 ID，我建议你在类名中设置 ID，将其附加到 PHP 代码中的实际 ID。