Question

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

例如，假设您想要这样做，假设我们已经有了一个地图，并且在myLatLng，myLatLng2中有LatLng。请注意，对dom。

添加了对shortlived节点的唯一引用


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时，您将不会短暂，您可能会得到'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中已有的引用。我希望有一些我不知道的东西。

提前致谢。

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属性，可以使用与上面相同的技术在信息窗口上设置对旧锚点的引用，然后在内容更改时检索它 - 但这似乎是不必要的。“ p>

Answer 2

你可以这样做，就像这样

createMessage();

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

google.maps.event.addListener(marker1, 'click', function() {
    infowindow.setContent(document.getElementById('shortlived'));
    infowindow.open(map, marker1);
    createMessage();
});
google.maps.event.addListener(marker2, 'click', 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...';
}

使用Google InfoWindow和content_changed保留节点？

2 个答案: