angular - 从外部 AGM 谷歌地图引用标记

Question

我正在使用 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();
    }
}

现在我需要在 map 外按下一个按钮并将 map 置于标记的中心并打开它的 InfoWindow 但我找不到获取标记引用的方法来实现此目的。

我创建了一个 Plunkr here

Answer 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>

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

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

窗口将打开!