Question

我正在尝试将更多信息传递到Google地图地图InfoWindow，但不知怎的，它无法正常工作。它必须只是一个简单的愚蠢的事情，但我花了几个小时就找不到它。

我的数据存储为：

res[i].id
res[i].name
res[i].date

等

然后我输出：

var marker = new google.maps.Marker（{ 职位：新

google.maps.LatLng(res[i].position.lat,res[i].position.long),
                            title:'',
                            orderid:res[i].id,
                            map:map,
                            icon: icon,
                        });    

google.maps.event.addListener(marker, "click", (function(id) {
    return function() {
    var contentString = '<div><b>Order ID:</b> '+id+'
                         <br><b>Name:</b> '+res[i].name+'</div>'
                         <br><b>Date:</b> '+res[i].date+'</div>';
    infowindow.setContent(contentString);
    infowindow.open(map, this);
    }
})(res[i].id));

id在我使用id时输出正常但我不知道如何传递其他变量..由于某种原因，名称和日期始终显示Cannot read property 'XXX' of undefined

我做错了什么？请注意，此地图上可能有许多标记，它位于for循环中。

Answer 1

找到解决方案：

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

function getInfoWindowDetails(location){
                            var contentString = '<div id="content" style="width:270px;height:100px">' +
                                                '<h3 id="firstHeading" class="firstHeading">' + location.name + '</h3>'+
                                                '<div id="bodyContent">'+
                                                    '<div style="float:left;width:100%">'+ location.status + '</div>'+
                                                '</div>'+
                                            '</div>';
                            return contentString;
                        }

希望这有助于某人！

Answer 2

您有两种选择：

在res[i]上获取函数闭包，以便您可以在“click”事件处理程序回调函数中访问其属性：

google.maps.event.addListener(marker, "click", (function(res) {
  return function() {
        var contentString = '<div><b>Order ID:</b> '+res.id+
                 '<br><b>Name:</b> '+res.name+'</div>'+
                 '<br><b>Date:</b> '+res.date+'</div>';
    infowindow.setContent(contentString);
    infowindow.open(map, this);
  }
})(res[i]));

proof of concept fiddle

将“click”事件处理函数中需要使用的所有属性添加到标记中，然后从那里访问它们（在“click”函数中使用this来引用标记）。这样做的好处是允许属性动态更改（尽管没有动态更新InfoWindow，但在再次单击标记之前，您将看不到它）。目前，它们始终是第一个值集（在最初创建标记的响应中）。

for (var i = 0, len = res.length; i < len; i++) {
  //Do we have this marker already?
  if (markerStore.hasOwnProperty(res[i].id)) {
    markerStore[res[i].id].setPosition(new google.maps.LatLng(res[i].position.lat, res[i].position.long));
    markerStore[res[i].id].timeStamp = timeStamp;
    // update its properties from the response
    markerStore[res[i].id].name = res[i].name;
    markerStore[res[i].id].date = res[i].date;
  } else {
    // create one
    var marker = new google.maps.Marker(res[i]);
    marker.setMap(map);
    marker.setPosition(new google.maps.LatLng(res[i].position.lat, res[i].position.long));
    google.maps.event.addListener(marker, "click", function() {
      var contentString = '<div><b>Order ID:</b> '+this.id+
        '<br><b>Name:</b> '+this.name+'</div>'+
        '<br><b>Date:</b> '+this.date+'</div>';
      infowindow.setContent(contentString);
      infowindow.open(map, this);
    });
    markerStore[res[i].id] = marker;
    markerStore[res[i].id].timeStamp = timeStamp;
  }
}

proof of concept fiddle

将更多信息传递到Google Maps InfoWindow

2 个答案: