javascript - Angular 2谷歌地图标记点击事件触发DOM中的div外观

Question

所以我有一个 Angular 2 应用程序，它应该有一个 map 、一个侧边栏和一个导航栏。 map 应该占据侧边栏旁边和导航栏下方的所有窗口。 Angular 结构如下:

1. 主窗口组件包含导航栏、侧边栏、 map 和 div 的模板，当我单击 map 上的标记时，该组件应该弹出并占据屏幕的右侧部分。我将所有这些都放在每个部分的一个组件中，以便轻松访问其他部分中的变量。当我点击标记时我想要在右侧弹出的div不是 map API中现有的弹出窗口；这是我硬编码到组件模板中的一个 div，我根据组件中的标志隐藏或显示它(我必须澄清这一点)。

2. main-window.html 模板，包含导航栏 div、侧边栏 div、带有 id="google-map 的 map div 以及带有 ngIf 的突出显示部分 div只要组件中的 this.highlightsSection 标志设置为 false

即可隐藏它

这是应该实现此目的的代码:

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 的此权利部分 map 的。

问题是，似乎 marker.addEventListener() 无法在点击时触发 this.toggleHighlights()，我不明白为什么

我对 Angular2 和 TypeScript 都很陌生，我以前做过类似事情的唯一方法是使用 jquery 和 DOM，但我需要有组件的概念来存储多个标志和变量，但我无法实现这个

PS:我已经尝试过 Sebastian 的 agm 第三方组件，它的功能非常有限，所以我不能依赖它

如果有人帮助我弄清楚这里发生了什么，我会很高兴

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();
   }); 
}

就我个人而言，我不太喜欢/推荐这个解决方案，但我认为，这个解决方法会起作用(最后直到您找到其他解决方案为止)。当我使用相同的方法时，我也遇到了类似的情况，因为我没有找到任何其他解决方案。

另外，请注意，我在发布之前没有运行此代码，只是为了给您提示。

所以，请在投反对票之前尝试...:)并点击答案，如果这对您有用...:)