Question

我正在尝试创建一个Google地图，其中每个标记链接到不同的页面（使用Ruby on Rails，Google Maps API 3）。我的标记代码：

var mapSpots = [
  <% @spots.each do |spot| %>
    ['<%= spot.name %>', <%= spot.lat %>, <%= spot.lng %>, '<%= spot_path(spot) %>'],
  <% end %>
];

for (var i = 0; i < mapSpots.length; i++) {
  var mapSpot = mapSpots[i];
  var marker = new google.maps.Marker({
    position: {lat: mapSpot[1], lng: mapSpot[2]},
    map: map,
    icon: image,
    title: mapSpot[0]
  });
  google.maps.event.addListener(marker, 'click', function () {
    window.location.href = mapSpot[3];
  });
}

为“Spot”模型中的每个条目创建标记。问题是，标记都链接到相同的页面 - 奇怪的是，用id：2发现（我目前有3个点条目）。关于如何确保每个标记链接到适当的斑点路径的任何想法？

也许嵌入式ruby不是最好的方法吗？

Answer 1

var mapSpots = [
  <% @spots.each do |spot| %>
    ['<%= spot.name %>', <%= spot.lat %>, <%= spot.lng %>, '<%= spot_path(spot) %>'],
  <% end %>
];

for (var i = 0; i < mapSpots.length; i++) {
  (function(n) {
    var mapSpot = mapSpots[n];
    var marker = new google.maps.Marker({
      position: {lat: mapSpot[1], lng: mapSpot[2]},
      map: map,
      icon: image,
      title: mapSpot[0]
    });
    google.maps.event.addListener(marker, 'click', function () {
      window.location.href = mapSpot[3];
    });
  })(i);
}

我认为这是javascript开发人员中最常见的错误。当您创建这样的回调时：

google.maps.event.addListener(marker, 'click', function () {
  window.location.href = mapSpot[3];
});

实际上你创建了一个闭包，它保存了对mapSpot变量的引用，你的所有回调函数都保存了对同一个mapSpot变量的引用。由于您在每次循环迭代中修改此变量，因此在最后一次迭代之后，它的值将是最后一个标记的值。

您在循环开始时添加了var mapSpot，但它并未在每次循环迭代中创建新变量。 javascript中没有循环范围，只有函数范围。您的mapSpot定义实际上是在循环之外提升的。看起来更像是这样：

var mapSpot;

for (var i = 0; i < mapSpots.length; i++) {
  mapSpot = mapSpots[i];
  ...

谷歌地图标记链接到同一页面

1 个答案: