2

git://github.com/GoogleWebComponents/google-map.git#* に対して google-map v1.1.10 を使用する

次のようにマーカーを作成します。

<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 の最初のロード時に、物事は非常にうまく機能します。マーカーをクリックすると、情報ウィンドウにコンテンツが表示されます。ただし、サイト配列の値を変更すると、情報ウィンドウやクリック イベントが失われるようです。初期状態に戻すには、ブラウザーを更新する必要があります (クリックして情報ウィンドウを表示)。

また、緯度/経度を変更し、ホバリングするとツールチップが表示されると、マーカーの位置が完全に更新されます。タイトルも適当に。

クリック イベントに console.log を呼び出すクリック イベントを追加しました。{{sites}} バインディングで値が変更されるまでうまく機能するため、Google マップ自体が更新されたときにクリック イベントが失われているように見えますか?

この要素にはスクリプトはありません。

さらに情報を提供できる場合は、お知らせください。

前もって感謝します、スコット

4

1 に答える 1

0

GoogleMapMarker に問題があるようです。試してみることができるハックがいくつかありますが、誰かが詳しく調べることができるようにチケットを発行する必要があります。

問題の 1 つは、MapMarker を更新する MutationObserver が監視しcharacterDataていないため、MapMarker の単純なテキスト コンテンツが変更されたときに起動しないことです。

もう 1 つの問題は、attach/のdetach実装が補完的ではないように見えることです。たとえばdetach、MutationObserver を削除し、attach元に戻すことはありません。

info最後に、ウィンドウが MapMarker から切断される場合があります。

これは、あなたが説明したように、GoogleMapMarker セットアップの 3 種類の変異がある JSBin です: 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問題は、Marker と Info がばらばらになったときに何が起こるかのようです。ハプニングがあるのか​​もしれませんattach/detach。

これを調べるように私をおびき寄せたのはうまくいきました。:)

于 2016-02-11T07:03:52.033 に答える