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地图，使用ACF和位置字段使用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。

每个标记的InfoBox（getElementById） - Google Maps API 3

2 个答案: