角度2 GoogleマップマーカーのクリックイベントDOMのdivの外観をトリガー

Question

私はマップ、サイドバー、およびnavbarを持っている角度2のアプリケーションがあります。マップは、サイドバーの横とナビバーの下のすべてのウィンドウを取っているはずです。次のように角度の構造は次のとおりです。

1. メイン・ウィンドウのナビゲーションバー用のテンプレートをcontaing部品、サイドバー、マップ、およびポップアップし、私はマーカーをクリックすると、画面の右側の部分を取るべきであるdiv要素地図にある。私は、各セクションのすべてのコンポーネントを1つのコンポーネントにまとめて、他のコンポーネントの変数に簡単にアクセスできるようにしています。マーカーをクリックしたときに右にポップアップするdivは、マップAPIに存在するポップアップウィンドウではありません。それはコンポーネントのテンプレートにハードコード化されたdivで、コンポーネントのフラグに基づいてそれを隠したり表示したりしています（私はこれを明確にしなければなりません）。

2. 限りコンポーネントにthis.highlightsSectionフラグが設定されているようにそれを隠すナビゲーションバーのDIV、サイドバーDIV、id="google-mapとマップDIV、およびngIfとハイライト・セクションのDIVを含む主window.htmlテンプレートあなたはこれら二つのハンドラ関数を参照してください

   import { Component, OnInit } from '@angular/core'; 
   import { Sensor } from '../entities/sensor'; 
   
   declare const google: any; 
   
   @Component({ 
       selector: 'app-main-window', 
       templateUrl: './main-window.component.html', 
       styleUrls: ['./main-window.component.css'] 
   }) 
   export class MainWindowComponent implements OnInit { 
   
   highlightsSection: boolean = false; 
   
   zoom: number = 14; 
   lat: number = 26.67946; 
   lng: number = -80.41719; 
   map: any; 
   marker: any; 
   mapProp: any = { 
       center: new google.maps.LatLng(this.lat, this.lng), 
       zoom: this.zoom, 
       mapTypeId: google.maps.MapTypeId.SATELLITE 
   }; 
   
   
   constructor() { } 
   
   ngOnInit() { 
       this.map =new google.maps.Map(document.getElementById("google-map"), this.mapProp); 
   } 
   
   toggleHighlights(): void { 
       if(!this.highlightsSection) { 
        this.highlightsSection = true; 
       } else { 
        this.highlightsSection = false; 
       } 
   } 
   
   registerMarkers(): void { 
       this.marker = new google.maps.Marker({ 
        position: {lat: this.lat, lng: this.lng}, 
        title: "Hello world!" 
       }); 
       this.marker.setMap(this.map); 
       this.marker.addListener('click', function() { 
        // What should go here to allow the marker to change the flag value of highlightsSection variable?? 
       }); 
   }  
   } 
   

   ：偽

にこれは、これを達成することになっているコードですthis.toggleHighlights()とthis.registerMarkers() 私は次のようにそれらを使用する必要があります私はthis.registerMarkers()（この時点まではうまく動作します）を表示するためにサイドバーにボタンを持っている必要がありますとこのthis.registerMarkers()の後にイベントを追加する必要がありますリスナーマーカー上をクリックして他のtoggleHighlights()関数をトリガーします。この関数は、マップの右側にハイライトdivのこの権利セクションを表示します。

問題は、marker.addEventListener()はクリックでthis.toggleHighlights()をトリガすることができないと私はangular2とtypescriptですし、私のようなものを行っている唯一の方法の両方に新しいです、なぜ

私は理解できないようだということです以前はjqueryとDOMを使用していましたが、複数のフラグと変数を格納するためのコンポーネントのコンセプトが必要で、これを達成できません。

PS：sebastianによってagm third partyコンポーネントを試しました。機能に制限があるので、私はそれに頼ることができません

ここで何が起きているのかを誰かが助けてくれたらうれしいです

Answer 1

おそらくクロージャーを試してみてください。以下のように：個人的に

registerMarkers(): void { 
    var toggler =() => { 
     // toggle the flag here 
    } 

    this.marker = new google.maps.Marker({ 
     position: {lat: this.lat, lng: this.lng}, 
     title: "Hello world!" 
    }); 
    this.marker.setMap(this.map); 
    this.marker.addListener('click', function() { 
     toggler(); 
    }); 
} 

、私は非常にこのソリューションをお勧めします/好きではないが、私は（あなたが他のいくつかの解決策を見つけるまで、最後に）、この回避策が働くだろうと思います。他の解決策が見つからなかったため、私も同じような状態になっていました。

また、私は投稿する前にこのコードを実行していませんが、あなたにヒントを与えることに注意してください。

だから... ...、ダウン投票前に試してみてください... :)これはあなたのために働く場合は、答えを打つ:)