Question

我在角度4应用程序中使用AgmMap作为地图。如何在agm-marker中实现mouseover事件，显示信息窗口。我需要在标记鼠标悬停上打开信息窗口。如何在我的函数onMouseOver中检索infowindow实例以打开它？这是我的map.component.html文件

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker *ngFor="let m of markers; let i = index"
          [latitude]="m.lat"
          [longitude]="m.lng"
          (markerClick)="clickedMarker(m, i)"
          [iconUrl]="m.iconUrl">
          <agm-info-window>{{m.label}}</agm-info-window>
  </agm-marker>
</agm-map>

和map.component.ts文件

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AlertService, AuthenticationService } from '../_services/index';
import { Ng4DropdownModule } from 'ng4-material-dropdown';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   moduleId: module.id,
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})

export class MapComponent implements OnInit {
   title: string = 'My first AGM project';  
  lat: number = 51.673858;
  lng: number = 7.815982;

  ngOnInit() {
  }

  markers: marker[] = [
      {
          lat: 51.673858,
          lng: 7.815982,
          label: 'Map A',
          draggable: true,
          iconUrl:'http://maps.google.com/mapfiles/ms/icons/green.png'
      },
      {
          lat: 51.373858,
          lng: 7.215982,
          label: 'Map B',
          draggable: false,
          iconUrl:'http://maps.google.com/mapfiles/ms/icons/red.png'
      },
      {
          lat: 51.723858,
          lng: 7.895982,
          label: 'Map C',
          draggable: true,
          iconUrl:'http://maps.google.com/mapfiles/ms/icons/yellow.png'
      }
  ];

  constructor() {
   }

   clickedMarker(marker:marker, index:number)
   {
    console.log('Clicked Marker:'+ marker.label+' at index'+index);
   }


}
interface marker {
    lat: number;
    lng: number;
    label?: string;
    draggable: boolean;
    iconUrl?: string;
}

你能帮我吗？如何在AgmMap中实现mouseover事件？

Answer 1

您可以使用 (mouseOver)="mouseOver($event)"

<agm-marker *ngFor="let m of markers; let i = index" (markerClick)="clickedMarker(m,i)" [latitude]="m.lati" [longitude]="m.longi"
 (mouseOver)="mouseOver($event)">
</agm-marker>

如何在<agm-map> angular 4中使用mouseover

1 个答案: