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

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

您在信息窗口中获取所有数据的原因是您从“位置”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 客户端。