javascript - 使用 Google InfoWindow 和 content_changed 保留节点？

Question

我正在尝试将 Google Maps 的 InfoWindow 与 DOM 节点一起使用，并在 InfoWindow 交换之间保留节点，而无需在 DOM 之外创建显式内容存储。不幸的是，当 InfoWindow 的内容被更改时，以前的内容似乎被破坏了，这是不幸的，因为它不可能切换回以前的节点。更糟糕的是，InfoWindow 的 content_changed 事件似乎没有引用以前的内容，因为 MVC 事件没有 event args。此外，如前所述here ，在函数中引用 content 属性仅引用当前值，而不是以前的值，因此看起来以前的值在所有时态和目的上都消失了。

例如，假设您想执行此操作，假设我们已经有了 map ，并且在 myLatLng、myLatLng2 中有 LatLng。请注意，对短生命周期节点的唯一引用已添加到 dom。

document.body.appendChild(document.createElement('div')).id = 'shortlived';
document.getElementById('shortlived').innerHTML = 'I will pass soon...';

var infowindow = new google.maps.InfoWindow();
var marker1 = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Marker1"
});
var marker2 = new google.maps.Marker({
    position: myLatlng2,
    map: map,
    title:"Marker2"
});

google.maps.event.addListener(marker1, 'click', function() {
  infoWindow.setContent(document.getElementById('shortlived'));
  infowindow.open(map, marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
  infoWindow.setContent('Some Text');
  infowindow.open(map, marker2);
});

你会注意到，如果你点击 marker1，你会看到短暂的节点，然后如果你点击 marker2，它就会消失，但是当你再次点击 marker1 时，你不会短暂，你可能会看到“一些文本”或者你可能一无所获，但无论哪种情况，昙花一现。就我而言，理想情况下我想执行以下操作:

google.maps.event.addListener(infoWindow, 'content_changed' function(e){
    //where e.content is the previous content
    document.body.appendChild(e.content)
}

或

google.maps.event.addListener(infoWindow, 'content_changed' function(e){
    //No such thing exists
    document.body.appendChild(infoWindow.previousContent)
}

这似乎不可能开箱即用，有什么想法吗？同样，我想避免创建一个独立的存储来保留对 DOM 节点的单独引用，而不是已经在 DOM 中的引用。我希望我遗漏了什么。

提前致谢。

Answer 1

我不是 100% 确定它符合您的用例，但是将 DOM 引用附加到标记本身怎么样？如果每个标记只有一个 DOM 节点，这应该能很好地工作，这意味着您可以简化点击处理程序代码(对于两个标记来说不是很大的收获，但对于 20 个标记来说非常方便)。这对我有用:

document.body.appendChild(document.createElement('div')).id = 'longlived';
document.getElementById('longlived').innerHTML = 'I will stick around!';

var infowindow = new google.maps.InfoWindow();
var marker1 = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Marker1"
});
// attach the DOM node to the marker instance
// marker1.iwcontent = myNode also works, but this follows the API
marker1.set('iwcontent', document.getElementById('longlived'));

var marker2 = new google.maps.Marker({
    position: myLatlng2,
    map: map,
    title:"Marker2"
});
// attach alternate content to this marker
marker2.set('iwcontent', "Some Text");

// create a click handler that will work for both markers
// a more robust option might check for the existence of iwcontent first
var openContentWindow = function() {
  var marker = this;
  // set the content to whatever's attached to the marker
  infowindow.setContent(marker.get('iwcontent'));
  infowindow.open(map, marker);
}

// attach your handler to your markers
google.maps.event.addListener(marker1, 'click', openContentWindow);
google.maps.event.addListener(marker2, 'click', openContentWindow);

请注意，虽然 DOM 节点在标记点击之间仍然存在，但它已从实际页面中删除。我不知道这是否是你想要的，但如果你想在信息窗口更改后让 DOM 节点可用，看起来你可以通过 anchor 访问标记信息窗口上的属性:

google.maps.event.addListener(infowindow, 'content_changed', function(){
    // I don't see this in the documented API, but it seems to reference
    // the *previous* anchor, the one you're interested in
    var marker = this.anchor; 
    // there are better tests for whether a var is a DOM node
    if (marker && marker.get('iwcontent').nodeType) {
        // do something with the DOM node here
    }
});

如果您担心使用未记录的 API 属性，您可以使用与上述相同的技术在信息窗口上设置对旧 anchor 的引用，然后在内容更改时检索它 - 但这似乎没有必要。