javascript - Gmaps.js - 具有动态信息窗口内容的多个标记

Question

我一直在广泛阅读有关将动态生成的 infoWindow 内容添加到 Google Maps API v3 map 的主题，但我无法找到适用于我的 map 实现的答案(我正在使用名为gmaps.js)。我在 javascript 和 PHP 方面的经验有限，所以我希望有人能指出我正确的方向。

目前，我在用于 Wordpress 站点的 map 上设置了标记。标记根据数据库中指定的位置坐标正确放置，但相应的信息窗口内容( map 上每个标记的建筑物名称和地址)在信息窗口的每个实例中同时显示，而不仅仅是与每个特定标记相关的内容。

这是我使用的代码(连同 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 将填充所有数据。

要让它按照您的意愿执行操作，最快的方法是将名称和地址字段添加到您在顶部生成的列表中的 anchor 标记。

<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 客户端。