Question

我一直在广泛阅读有关将动态生成的infoWindow内容添加到Google Maps API v3地图的主题，但我找不到适用于我的地图实现的答案（我使用的是现有脚本gmaps.js）。我对javascript和PHP的经验有限，所以我希望有人能指出我正确的方向。

目前，我已将我的标记设置在我用于Wordpress网站的地图上。标记根据数据库中指定的位置坐标正确放置，但相应的infoWindow内容（地图上每个标记的建筑物名称和地址）在infoWindow的每个实例中一次显示，而不是仅显示与每个特定标记有关的内容。

这是我正在使用的代码（以及gmaps.js脚本）：

<div id="map"></div>

  <ul class="markers">

    <?php
    $markers = get_field('locations', $post->ID);

    foreach($markers as $m): ?>

      <li><a data-latlng="<?php echo $m['location']['coordinates']; ?>" data-icon="<?php bloginfo('template_url'); ?>/assets/img/map_icons/<?php echo $m['icon']; ?>.png"></a></li>

    <?php
    endforeach; ?>

  </ul>

<script>
$(function() {

  var $body = $('body'),
      $window = $(window);

  if($body.hasClass('page-template-page_map-php')){

    var $map = $('#map');

    function set_map_height(){
      $map.height($(window).height() - $('#header').outerHeight());
    }

    set_map_height();

    $window.on('resize', function(){

      set_map_height();

    })

    var map = new GMaps({
      div: '#map',
      lat: 49.8994,
      lng: -97.1392
    });

    $('.markers li a').each(function(){

      var $this = $(this),
          latlng = $this.data('latlng').split(',');

      map.addMarker({
        lat: latlng[0],
        lng: latlng[1],
        title: 'Development',
        click: function(e) {
        },
        infoWindow: {
          content: $("#location").html() + i
        },
        icon: $this.data('icon')
      });

    });

    map.fitZoom();
  }

});

</script>
<div id="location">
<?php
$markers = get_field('locations', $post->ID);
foreach($markers as $m): ?>

<h3><?php echo $m['name']; ?></h3>
<p><?php echo $m['location']['address']; ?></p>

<?php
endforeach; ?>
</div>

非常感谢你的帮助，如果我没有提供足够的细节，我表示歉意。

Answer 1

您获取信息窗口中的所有数据的原因是因为您从“location”div中提取HTML。当您循环遍历标记列表时，此div将填充所有数据。

实现目标的最快捷方式是将名称和地址字段添加到您在顶部生成的列表中的锚标记。

<ul class="markers">

<?php
$markers = get_field('locations', $post->ID);

foreach($markers as $m): ?>

  <li><a data-latlng="<?php echo $m['location']['coordinates']; ?>" data-icon="<?php bloginfo('template_url'); ?>/assets/img/map_icons/<?php echo $m['icon']; ?>.png" data-name="<?php echo $m['name']; ?>" data-address="<?php echo $m['location']['address']; ?>></a></li>

<?php
endforeach; ?>

然后，您可以直接在javascript循环中设置信息窗口内容。

$('.markers li a').each(function(){

  var $this = $(this),
      latlng = $this.data('latlng').split(','),
      name = $this.data('name'),
      address = $this.data('address');

  map.addMarker({
    lat: latlng[0],
    lng: latlng[1],
    title: 'Development',
    click: function(e) {
    },
    infoWindow: {
      content: "<b>Name:</b>" + name + "<br /><b>Address:</b>" + address
    },
    icon: $this.data('icon')
  });

});

现在，我建议更改整个设计以使用AJAX调用，让PHP返回一个JSON数据数组，而不是将所有这些数据存储在DOM中。您可以使用JQuery的ajax函数和PHP json_encode / json_decode将JSON数据传入/传出Web客户端。

Gmaps.js - 具有动态infoWindow内容的多个标记

1 个答案: