参考 AGM Google Map 外部的标记答案

【问题标题】：Reference a marker from outside AGM Google Map参考 AGM Google Map 外部的标记
【发布时间】：2017-10-25 11:06:01
【问题描述】：

我正在使用AGM Google Map 组件。我用*ngFor在模板中添加了标记。

import {  Component,  NgModule} from '@angular/core';
import {  BrowserModule} from '@angular/platform-browser';
import {  AgmCoreModule} from '@agm/core';
import {  AgmJsMarkerClustererModule,  ClusterManager } from '@agm/js-marker-clusterer;

@Component({
  selector: 'my-app',
  styles: [`
    .agm-map-container {
       height: 300px;
     }
  `],
  template: `
   <agm-map #gm style="height: 300px" [latitude]="52.692868" [longitude]="7.834982">

    <agm-marker *ngFor="let m of markers; let i = index" (mouseOver)="onMouseOver(infoWindow,gm)" [latitude]="m.latitude" [longitude]="m.longitude">

            <agm-info-window [disableAutoPan]="false" #infoWindow>
               Test
            </agm-info-window>


    </agm-marker>

</agm-map>
<button type="button" (click)="onFocusMarker1($event)">Focus marker 1</button>
<button type="button" (click)="onFocusMarker2($event)">Focus marker 2</button>

`})
export class AppComponent {

  markers: Array<any>
  constructor(){

    this.markers=[{latitude:52.692868, longitude:7.834982},{latitude:52.992868, longitude:7.034982}]

  }

  onFocusMarker1(event){
    event.preventDefault();

    alert("How to take reference of first marker, centrer the map on it and open the info window?");
  }

  onFocusMarker2(event){
    event.preventDefault();

    alert("How to take reference of second marker, centrer the map on it and open the info window?");
  }

   onMouseOver(infoWindow, gm) {

        if (gm.lastOpen != null) {
            gm.lastOpen.close();
        }

        gm.lastOpen = infoWindow;

        infoWindow.open();
    }
}

现在我需要在地图外按下一个按钮并将地图居中放置在标记上并打开其InfoWindow，但我找不到获取标记参考的方法来实现此目的。

我创建了一个 Plunkr here

【问题讨论】：

标签： angular google-maps google-maps-api-3

【解决方案1】：

我也遇到过同样的问题。虽然我无法获得对标记本身的引用，但我最终采用了声明方式并使用 AgmInfoWindow.isOpen See here。

<agm-marker *ngFor="let m of markers; let i = index" (mouseOver)="onMouseOver(infoWindow,gm)" [latitude]="m.latitude" [longitude]="m.longitude">
   <agm-info-window [disableAutoPan]="false" [isOpen]="m.isOpen" #infoWindow>
      Test
   </agm-info-window>
</agm-marker>

如果您现在点击地图外的按钮，您只需将您选择的标记设置为

this.markers[0].isOpen = true; // I strongly assume you have a more sophisticated way of selecting your marker

然后窗口就会打开！

【讨论】：