使用Google InfoWindow和content_changed保存节点？

问题描述

| 我试图将Google Maps的InfoWindow与DOM节点一起使用，并保留InfoWindow交换之间的节点，而不必在DOM之外创建显式的内容存储。不幸的是，当更改InfoWindow的内容时，先前的内容似乎已被破坏，这很不幸，因为它无法切换回先前的节点。更糟的是，似乎InfoWindow的

content_changed

事件没有引用以前的内容，因为MVC事件没有

event

args。此外，如此处所述，在函数中引用content属性仅引用当前值，而不引用先前的值，因此似乎出于所有时态和目的，先前的值已消失。 例如，假设您要执行此操作，假设我们已经有一个地图，并且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,title:\"Marker2\"
});

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

您会注意到，如果您单击marker1，您将看到寿命很短的节点，然后，如果您单击marker2，它就会消失，但是当您再次单击marker1时，您将不会变得短暂，您可能会得到\'Some Text \ ”，否则您可能一无所获，但无论哪种情况，短暂的生命都消失了。就我而言，我希望能够做到以下几点：

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中的引用。我希望有一些我想念的东西。 提前致谢。     

解决方法

我不是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,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,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属性，则可以使用与上述相同的技术在信息窗口上设置对旧锚的引用，然后在内容更改时检索它-但似乎没有必要。     ,你可以做到的，像这样

createMessage();

var infowindow = new google.maps.InfoWindow();
var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(18.464008,-66.117776),title:\"Marker1\"
});
var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(18.470338,-66.123503),title:\"Marker2\"
});

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

function createMessage(){
    document.body.appendChild(document.createElement(\'div\')).id = \'shortlived\';
    document.getElementById(\'shortlived\').innerHTML = \'I will pass soon...\';
}