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

我一直在广泛阅读关于将动态生成的infoWindow内容添加到Google Maps API v3 Maps的主题，但是我在使用名为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>

---

非常感谢您的帮助，如果我没有提供足够的详细信息，我深表歉意。

您在信息窗口中获取所有数据的原因是您正在从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向web客户端传递json数据

在信息窗口中获取所有数据的原因是，您正在从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向web客户端传递json数据

这正是我需要的解决方案，谢谢！我在理解如何将PHP变量与javascript结合使用时遇到了困难，所以我将它们放在一个页面上，以避免我所知甚少的AJAX调用。我看看下一步能不能把脑袋绕过去！这正是我需要的解决方案，谢谢！我在理解如何将PHP变量与javascript结合使用时遇到了困难，所以我将它们放在一个页面上，以避免我所知甚少的AJAX调用。我看看下一步能不能把脑袋绕过去！