javascript - map 图标仅显示我的信息窗口的第一个字符

Question

我正在通过 aspx 底层代码将一串纬度/经度传递给我的 javascript。 map 显示正确，但当您单击图钉时，它仅显示图钉的第一个字符。

这是我的 C# 代码:

public string sdata;
protected void Page_Load(object sender, EventArgs e)
{
  sdata = "Fred,26.2486591339111,-80.2002334594727|Tom,26.2344417572021,-80.1393356323242|Paul,26.0818271636963,-80.2083358764648|John,26.2701854705811,-80.1152496337891|Eric,26.2009468078613,-80.1440734863281";
}

任何我的 JavaScript:

  var data2 = '<%=sdata%>'.toString();
  var locations = data2.split('|');

  var loc = locations[0].split(",");
  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(loc[1],loc[2]),
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  var pinColor = "#";
  for (k = 0; k < 3; k++) {
      pinColor += ("0" + (Math.random() * 256 | 0).toString(16)).substr(-2);
  }

  var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + "#0000ff",
              new google.maps.Size(21, 34),
              new google.maps.Point(0, 0),
              new google.maps.Point(10, 34));
  var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
              new google.maps.Size(40, 37),
              new google.maps.Point(0, 0),
              new google.maps.Point(12, 35));

  for (i = 0; i < locations.length; i++) {
      var loc = locations[i].split(",");
      marker = new google.maps.Marker({
          position: new google.maps.LatLng(loc[1], loc[2]),
          //icon: pinImage,
          //shadow: pinShadow,
          map: map
      });

      google.maps.event.addListener(marker, 'click', (function (marker, i) {
          return function () {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
          }
      })(marker, i));
  }

我的分割似乎工作正常:

这是我点击图钉时看到的内容:

我认为问题出在 addListener(?) 中，但我对 javascript 和谷歌地图不熟悉。

大家有什么建议吗？

Answer 1

更新:进行澄清

您的问题是，您在处理程序的 for 循环中进行了逗号分割，但随后在拉取第一个元素时引用了未分割的版本 - 因此您将获得字符串的第一个元素

"Fred,26.2486591339111,-80.2002334594727"

即

"F"

您需要引用在循环开始时拆分的 loc 数组。

更改行:

google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function () {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
    }
})(marker, i));

致:

google.maps.event.addListener(marker, 'click', (function (marker, loc) {
    return function () {
        infowindow.setContent(loc[0]);
        infowindow.open(map, marker);
    }
})(marker, loc));

为了获得:

"Fred"