每個標記的InfoBox（getElementById） - Google Maps API 3

Question

我正在使用帶有InfoBox的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'),

獲取每個標記的每個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，並在沒有內容選項的情況下最初聲明它？ 如果我理解正確，您可以為每個標記設置一個事件處理程序，並將回調設置為使用一個信息框。 類似於以下內容：

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。