Question

我正在使用谷歌地图作为主页面的Wordpress网站上工作。地图上的标记由帖子创建，每个帖子都有一个与之关联的位置（通过使用高级自定义字段）。我的目标是点击任何特定的标记，并将其标记的相关帖子加载到屏幕底部的div中。

<div class="acf-map">
<?php if ( $query->have_posts() ) : while ($query->have_posts() ) : $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']; ?>"></div>

            <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>

带有“标记”类的div实际上并未直接加载到地图上，而是从脚本中收集并使用以下函数传递给google方法

function add_marker( $marker, map ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng'))

    var postid = $marker.attr('id');

    // create marker
    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map,
        idofpost    : postid
    });

    // add to array
    map.markers.push( marker );
    var infowindow = new google.maps.InfoWindow({
      content:"<?php the_field('sound_description'); ?>"
    });

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

作为初学者，我很难找到实现上述目标的最佳工作流程。任何帮助将不胜感激。

谢谢，

点击Google地图标记，将wordpress帖子加载到div

0 个答案: