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

Использование google-map v1.1.10 против git: //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>

Upon initial loading of the webapp, things work really well. I can click on a marker and the infowindow shows the content. However, if I change any values in my sites array, I seem to lose the infowindow and/or the click event. I have to refresh the browser to get back to my initial condition (click to show infowindow).

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

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

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

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

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


google-maps google-maps-markers web-component polymer google-web-component
person user1519336    schedule 10.02.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

Другая проблема заключается в том, что реализации _2 _ / _ 3_ не кажутся дополнительными. Например, 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 происходит.

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

person Scott Miles    schedule 11.02.2016
comment
Спасибо, что изучили это. Я подал отчет здесь: github.com/GoogleWebComponents/google-map/issues/257 Не возражаете, если я добавлю ваш отзыв по этому вопросу? А пока я воспользуюсь вашим решением, очень признателен! - person user1519336; 11.02.2016
comment
Конечно, свяжите это с этим постом ТАК, вот о чем я подумал. - person Scott Miles; 11.02.2016