集成谷歌地图w/ WordPress -信息窗口未打开

Integrating Google Maps w/ WordPress - Infowindow not opening

本文关键字：窗口 信息窗 信息 谷歌地图 WordPress 集成      更新时间：2023-09-26

我目前正试图在我的wordpress博客的主页上合并一个地图，这将显示一个基于帖子内容和自定义字段位置的地图上的自定义图标。我已经很接近了，除了信息窗口之外，一切都正常了。没有错误，也没有窗口。非常感谢您的帮助。

我看了类似的问题，尝试了一些方法，但都不起作用。

下面是我的代码: 
<script type="text/javascript">
function initialize() {
// setup map
var latlng = new google.maps.LatLng(34.109739, -118.351936);
var myOptions = {
  zoom: 10,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
var infowindow = new google.maps.InfoWindow();

// icons
var bootIcon = '/images/icons/bootIcon.png';
var hikingIcon = '/images/icons/hikingIconSm.png';
// Init post Data
var i = 0;
var hikingPositions = new Array();
var hikingMarkers = new Array();
var hikingBlurbs = new Array();
<?php $hiking_query = new WP_Query('category_name=hiking_ctg&posts_per_page=4');
        while ($hiking_query->have_posts()) : $hiking_query->the_post();?>
            <?php $geoLoc = get_post_meta($post->ID, 'longlat', true); ?>
            // Set Post data
            hikingPositions[i] = new google.maps.LatLng(<?php echo $geoLoc; ?>);
            hikingMarkers[i] = new google.maps.Marker({
              position: hikingPositions[i],
              map: map,
              icon: hikingIcon,
              title:"<?php the_title(); ?>"
            });
            hikingBlurbs[i] = '<div id="content"><h1 id="firstHeading" class="firstHeading"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1><div id="bodyContent"><p>.</p></div></div>'; 
            i++;
<?php endwhile; ?>

// Assign data to map
for(var j=0, marker; j < hikingMarkers.length; j++)
 {
     // To add the marker to the map, call setMap();
     hikingMarkers[j].setMap(map);  
     marker = hikingMarkers[j]; 
     google.maps.event.addListener(marker, 'click', function() {
         infowindow.setContent(hikingBlurbs[j]);
         infowindow.open(map,this);
     });
 }
}
$(document).ready(function() {
 initialize();
});
</script>

我还有很长的路要走，以完成所有的功能，我正在寻找，但对于这个构建，这是唯一不工作的东西。

提前感谢。

问候,GeneralChaos

我相信有更优雅的解决方案，但这是有效的。

我注意到我使用的事件处理程序只有在循环结束时才接收索引，所以我将标记更改为"this"并向标记对象添加了"content"值。

在标记符前定义内容数组:

hikingBlurbs[i] = '<div id="infowindowContent"><h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1><div id="bodyContent"><p>.</p></div></div>';

用新的内容变量定义你的标记:

// Set Post data
hikingPositions[i] = new google.maps.LatLng(<?php echo $geoLoc; ?>);
hikingMarkers[i] = new google.maps.Marker({
   position: hikingPositions[i],
   map: map,
   icon: hikingIcon,
   title:"<?php the_title(); ?>",
   content: hikingBlurbs[i]
});

现在通过一些简单的更改添加事件侦听器:

// Assign data to map
for(marker in hikingMarkers)
 {
  google.maps.event.addListener(hikingMarkers[marker], 'mouseover', function() {
           infowindow.setContent(this.content);
           infowindow.open(map,this);
           });
 }

如果你看到更好的方法或者你有任何问题，请告诉我。

最诚挚的问候,GeneralChaos

相关文章：