【问题标题】:agm-marker's markerClick() is returning nullagm-marker 的 markerClick() 返回 null
【发布时间】:2018-09-05 11:06:14
【问题描述】:

从 Angular 谷歌地图 API 中,我们有一个 markerClick() 函数,其定义如下,

 @Output() markerClick: EventEmitter<void> = new EventEmitter<void>();

但是当我在我的应用程序中使用时,我得到 NULL

我有以下应用程序代码,

在我的 HTML 文件中,

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
        <agm-marker *ngFor="let marker of coordinates;" 
        [iconUrl]="icon" 
        [latitude]="marker.latitude" 
        [longitude]="marker.longitude"
        [markerClickable]="true"
        (markerClick)="markerClicked($event)">
    </agm-marker>
    </agm-map>

在 .TS 文件中,

 markerClicked($event: MouseEvent) {
    console.log('clicked'); ----------------(1)
    console.log($event);--------------------(2)
  }

对于语句 (2),我得到 NULL 作为控制台输出。 我期待它是标记对象。我的理解错了吗? 如何从 markerClick() 函数中获取 lat 和 lng。

注意,我已经为 agm-map 标签 使用了 mapClick() 函数,但是当我使用该函数时,它没有响应点击地图上已绘制的标记。

【问题讨论】:

    标签: angular google-maps-markers angular-google-maps


    【解决方案1】:

    如果您更深入地研究FILE,它总是会发出null

    this.markerClick.emit(null); // line no : 192
    

    你可以做的就是改变这个:

    (markerClick)="markerClicked($event)"
    

    收件人:

    (markerClick)="markerClicked(marker)" // this way you will get the marker object
    

    WORKING DEMO(点击任何可用的标记)

    【讨论】:

    • @Anil,请查看工作演示,stackblitz.com/edit/angular-google-maps-demo2
    • 谢谢,得到了所需的信息,我不知道,我们可以在 html 中传递属性。
    • @Anil ,很高兴知道这一点,快乐编码顺便说一句:)。
    • 有什么方法可以在不点击marker的情况下获取marker对象?
    【解决方案2】:

    在 app.component.html 中

    <agm-map>
    <agm-marker  *ngFor="let place of markers" [latitude]=place.lat [longitude]=place.lng  title={{place.title}}  (markerClick)="clickedMarker(place.lat, place.lng)" >
    <agm-info-window><strong>{{place.label}}</strong></agm-info-window>
    </agm-marker>
    </agm-map>
    

    在 app.components.ts 中

    markers: any[] = [];
    
    selectedLat: Number = 0;
    selectedLng: Number = 0;
    
    clickedMarker(lat: number, lng: number) {
    this.selectedLat = lat;
    this.selectedLng = lng;
    }
    

    在这里,当点击标记时,它会调用clickedMarker(lat: number, lng: number) 函数。在那里 selectedLat 和 selectedLng 变量从(markerClick)="clickedMarker(place.lat, place.lng)的发送参数更新

    不要这样使用(markerClick)="markerClicked($event)"

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-03-17
      • 2018-06-01
      • 1970-01-01
      • 2019-03-19
      • 2018-11-21
      相关资源
      最近更新 更多