Создание маркеров карты Google посредством итерации по массиву с использованием привязки данных. Почему я теряю информацию о событиях и/или событиях при обновлении данных?

Question

Использование Google-карта v1.1.10 против мерзавца: //github.com/GoogleWebComponents/google-map.git#*

Я строй моих маркеров, как так:

<template> 
    <site-data sites="{{sites}}"> </site-data> 
    <google-map fit-to-markers > 
    <template is="dom-repeat" items="{{sites}}"> 
    <template is="dom-repeat" items="{{item}}"> 
     <google-map-marker latitude={{item.latitude}} 
         longitude={{item.longitude}} 
         title="{{item.project_name}}" 
         > 
     <h1>{{item.project_name}}</h1> 
     <p style="margin: 0;">Location: <b>{{item.town}}, {{item.country}}</b></p> 
     <p style="margin: 0;">Tech Description: <b>{{item.tech_desc}}</b></p> 
     </google-map-marker> 
    </template> 
    </template> 
</google-map> 

При начальной загрузке webapp все работает очень хорошо. Я могу щелкнуть маркер, и в этом окне отображается содержимое. Однако, если я изменяю любые значения в массиве моих сайтов, я, кажется, теряю информацию и/или событие click. Мне нужно обновить браузер, чтобы вернуться в исходное состояние (нажмите, чтобы отобразить infowindow).

Кроме того, расположение маркеров будет прекрасно обновляться, если я изменю lat/long и покажет подсказку aka. название, соответственно.

Я добавил событие click, которое вызывает событие console.log для события click. Он хорошо работает до тех пор, пока значение не будет изменено в {{sites}} привязке, поэтому, похоже, я теряю события кликов, когда обновляется сама карта google-map?

В этом элементе нет скриптов.

Если я могу предоставить дополнительную информацию, пожалуйста, дайте мне знать.

Спасибо заранее, Скотт

Answer 1

Похоже, что есть некоторые проблемы с GoogleMapMarker. У меня есть некоторые хаки, которые вы можете попробовать, но вы должны сделать билет issue, чтобы кто-то мог глубже взглянуть на него.

Одна из проблем заключается в том, что MutationObserver, обновляющий MapMarker, не наблюдает characterData, поэтому он не срабатывает при изменении простого текстового содержимого MapMarker.

Другая проблема заключается в том, что реализации attach/detach не кажутся взаимодополняющими. Например, detach удаляет MutationObserver, а attach никогда не вернет его.

Наконец, бывают случаи, когда окно info отключается от MapMarker.

Вот JSBin, где есть три вида мутаций установки GoogleMapMarker, как вы описали: http://jsbin.com/hobixi/edit?html.

• Добавление нового маркера карты, похоже, очень хорошо работает.

• Изменение содержимого существующего маркера не удается из-за проблемы MutationObserver, которую я описал. Я установил, что к обезьяне заплат _contentChanged метод GoogleMapMarker как так:

Пример:

marker._contentChanged = function() { 
    if (this._contentObserver) 
    this._contentObserver.disconnect(); 
    // Watch for future updates. 
    this._contentObserver = new MutationObserver(this._contentChanged.bind(this)); 
    this._contentObserver.observe(this, { 
     childList: true, 
     subtree: true, 
     ///---------------- 
     // monkey patch 
     characterData: true 
     //----------------- 
    }); 
... 

• Наконец, я искусственно пример, который удаляет маркер из DOM и помещает его обратно.Это не удается, как описано выше, так что я обезьяна заплаты attached и detached так:

Пример:

marker.detached = function() { 
    if (this.marker) { 
     google.maps.event.clearInstanceListeners(this.marker); 
     this._listeners = {}; 
     this.marker.setMap(null); 
     ///---------------- 
     // monkey patch 
     this.info = null; 
     //----------------- 
    } 
    if (this._contentObserver) 
     this._contentObserver.disconnect(); 
    }; 
    marker.attached = function() { 
    // If element is added back to DOM, put it back on the map. 
    if (this.marker) { 
     this.marker.setMap(this.map); 
     ///---------------- 
     // monkey patch 
     this._contentChanged(); 
     //----------------- 
    } 
    }; 

Вы не указали характер изменений вы инициирующие. Проблема clicking doesn't show the info window кажется, что происходит, когда маркер и информация становятся неудобными, возможно, происходит attach/detach.

Хорошо сыграл, нападая на меня, чтобы посмотреть на это. :)