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

所以我有一个角2应用程序应该有一个地图,侧边栏和导航栏。该地图应该是在侧边栏和导航栏下的所有窗口。角结构如下:Angular 2谷歌地图标记点击事件触发DOM在DOM中的外观

  1. 一个主窗口组件方含的导航栏,边栏,图中的模板和一个div应该弹出,当我点击标记取屏幕的右侧部分在地图上。我将它们全部放在每个部分的一个组件中,以便轻松访问其他部分中的变量。当我点击标记时,我想在右侧弹出的div不是地图API中存在的弹出窗口;这是一个div,我硬编码到组件的模板中,我隐藏它或根据组件中的一个标志显示它(我必须清楚)。

  2. ,其包括导航栏的div,边栏DIV,地图DIV与id="google-map,和亮点截面分度ngIf隐藏它只要在该组件的this.highlightsSection标志被设置主-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和打字稿,我已经做了类似的唯一途径以前是通过使用jquery和DOM,但我需要有组件的概念来存储多个标志和变量,我不能达到这个

PS:我已经尝试了塞巴斯蒂安agm第三方组件,它是非常有限的功能,所以我不能依靠它

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

回答:

你可以尝试使用闭包;如下图所示:

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

});

}

就个人而言,我不喜欢高/推荐这个解决方案,但我认为,这种解决办法将工作(在最后,直到你找到一些其他的解决方案)。当我使用相同的条件时,我也遇到了类似的情况,因为我没有找到任何其他解决方案。

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

所以,请尽量先下去投票... :)和命中的答案,如果这对你的作品...... :)

以上是 Angular 2谷歌地图标记点击事件触发DOM在DOM中的外观 的全部内容, 来源链接: utcz.com/qa/258467.html

回到顶部