Question

我一直在尝试将信息窗口添加到Google地图标记我在从服务器接收JSON数组后动态添加。我相信，我的问题是不能很好地理解Javascript如何处理变量和范围。

我试过这段代码：

$.getJSON("server", function(data) {
        if (data.items.length > 0) {
            var infowindow = new google.maps.InfoWindow({
              content: "placeholder"
            });
            for (var i = 0; i < data.items.length; i++) {
              var latLng = new google.maps.LatLng(data.items[i]["lat"],
                                                  data.items[i]["lng"]);
              var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: data.items[i]["text"],
                icon: data.items[i]["alert_type"],
                animation: google.maps.Animation.DROP
              });
              marker.addListener('click', function() {
                infowindow.setContent(data.items[i]["text"]);
                infowindow.open(map, this);
              });
            } // end for
        } // end if
    }); // end getJSON

此代码的问题是，当我单击标记以显示infoWindow时，我收到错误data.items[i] is undefined，但我知道它是在我在该行代码之前多次访问之前定义的（我删除了代码与访问它的问题无关。）

所以，由于我无法在函数声明中访问，我在之前创建了一个var：var reportText = data.items[i]["text"];然后在函数内部将问题的行改为infowindow.setContent(reportText);，运行时没有错误。但是，当我单击任何标记时，它们都显示具有相同文本的窗口，即我收到的上一个报告中的文本，而不是单独设置为每个。我假设这是因为infowindow在设置时保存变量位置而不是字符串值，因此它读取设置给变量的最后一个值。

最后，我尝试以不同方式初始化我的标记：

var marker = new google.maps.Marker({
  position: latLng,
  map: map,
  title: data.items[i]["text"],
  icon: data.items[i]["alert_type"],
  label: reportText,
  animation: google.maps.Animation.DROP
});

通过将标签设置为我想要的文字，我可以这样做：

infowindow.setContent(this.label);

我在infowindow上获得了显示每个标记的正确文本的预期行为。我对这个版本的问题在于我使用的是不是为标签设计的自定义图标，而且它们看起来很丑陋。

我需要的是获得标记的label属性但不在标记中显示标签的方法，或者，最好是一种使setContent复制字符串值的方法，而不仅仅是保存对变量的引用。

感谢任何帮助，谢谢。

Answer 1

在@geocodezip的第一条评论中查看问题并使用我自己的代码后，我设法获得了一个可用的版本。它涉及制作一个我并不特别高兴的全局数组，但它具有预期的行为。这是代码的工作版本：

var texts = [];

function makeRequest() {
    $.getJSON("server/reports", function(data) {
        if (data.items.length > 0) {
            var infowindow = new google.maps.InfoWindow({
              content: "placeholder"
            });
            var text = "<ul>";
            for (var i = 0; i < data.items.length; i++) {
              var reportText = data.items[i]["text"];
              texts.push(reportText);
              text += "<li>"; 
              text += data.items[i]["text"] + "<br />";
              text += data.items[i]["end_date"];
              text += "</li>";
              var latLng = new google.maps.LatLng(data.items[i]["lat"],
                                                  data.items[i]["lng"]);
              var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: data.items[i]["text"],
                icon: data.items[i]["alert_type"],
                animation: google.maps.Animation.DROP
              });
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                  infowindow.setContent(texts[i]);
                  infowindow.open(map, marker);
                }
              })(marker, i));
            } // end for
            text += "</ul>"
        } // end if
        document.getElementById("content").innerHTML = text;
    }); // end getJSON
}

使用Javascript

1 个答案: