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

现在我需要在地图外按一个按钮并将地图置于标记中心并打开它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>

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

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

然后将打开窗口！

从AGM Google Map外部引用标记

1 个答案: