Сохранение узлов с Google InfoWindow и content_changed?

Question

Я пытаюсь использовать InfoWindow Карт Google с узлами DOM и сохранять узлы между свопами InfoWindow без необходимости создания явного хранилища контента вне DOM.К сожалению, когда содержимое InfoWindow изменяется, предыдущее содержимое кажется уничтоженным, что вызывает сожаление, так как не позволяет вернуться к предыдущему узлу.Что еще хуже, похоже, что событие InfoWindow content_changed не имеет ссылки на предыдущее содержимое, так как события MVC не имеют аргументов event.Кроме того, как уже упоминалось здесь , ссылка на свойство содержимого внутри функции ссылается только на текущее значение, а не на предыдущее значение, таким образом, казалось бы, предыдущее значение пропало для всех времен и целей.

Например, допустим, что вы хотите это сделать, предположим, что у нас уже есть карта, и LatLng в myLatLng, myLatLng2.Обратите внимание, что единственная ссылка на недолговечный узел была добавлена ​​в домен.

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, он исчезнет, ​​но когдаВы нажимаете маркер1 снова, вы не получите короткое время, вы можете получить «Некоторый текст» или вы можете ничего не получить, но в любом случае короткое время исчезло.В моем случае я хотел бы в идеале сделать следующее:

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, вы можете использовать ту же технику, что и выше, чтобы установить ссылку на старый якорь в информационном окне, а затем извлечь его при изменении содержимого, но это кажется ненужным.

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...';
}