Angular 2谷歌地图标记点击事件触发DOM在DOM中的外观
所以我有一个角2应用程序应该有一个地图,侧边栏和导航栏。该地图应该是在侧边栏和导航栏下的所有窗口。角结构如下:Angular 2谷歌地图标记点击事件触发DOM在DOM中的外观
一个主窗口组件方含的导航栏,边栏,图中的模板和一个div应该弹出,当我点击标记取屏幕的右侧部分在地图上。我将它们全部放在每个部分的一个组件中,以便轻松访问其他部分中的变量。当我点击标记时,我想在右侧弹出的div不是地图API中存在的弹出窗口;这是一个div,我硬编码到组件的模板中,我隐藏它或根据组件中的一个标志显示它(我必须清楚)。
,其包括导航栏的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