如何在<agm-map>角4中使用鼠标

Question

我正在使用AgmMap的地图在角4应用程序。如何在显示信息窗口的agm标记中实现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>

Answer 2

使用本守则：

<agm-map [latitude]="lat" [longitude]="lng" [usePanning]="true">
    <agm-marker *ngFor="let m of markers; let i = index" [latitude]="m.lat" [longitude]="m.lng" (markerClick)="clickedMarker(m, i)" [iconUrl]="m.iconUrl" [openInfoWindow]="true" (mouseOver)="onMouseOver(infoWindow, $event)" (mouseOut)="onMouseOut(infoWindow, $event)">
        <agm-info-window [disableAutoPan]="false" #infoWindow>
            <div>
                <p [innerHTML]="m?.label"></p>
            </div>
        </agm-info-window>
    </agm-marker>
</agm-map>

ts代码：

 onMouseOut(infoWindow) { infoWindow.close(); } onMouseOver(infoWindow) { infoWindow.open(); }