如何在角度为4的agm中鼠标悬停时显示infoWindow

时间:2018-05-01 15:35:02

标签: angular google-maps angular-google-maps

我正在尝试为Angular 4 Map项目实施Angular Google Map Module(AGM)。 我已经成功添加了AGM模块,并且能够填充标记。 但是,我的infoWindow在点击标记时显示,而不是鼠标悬停。 我试过跟this url,但它对我不起作用。 请建议一种方法。 提前致谢...!!! 请在下面找到我的代码

component.html

assertThat(scenarioList, argThat(new isListOfSize(2)))

component.ts

 <agm-map #gm
     [latitude]="lat"
     [longitude]="lng"
     [zoom]="zoom"
     (mouseOver)="onMouseOver(infoWindow,gm)">
     <agm-marker 
       *ngFor="let m of coordinates; let i = index"
       [latitude] = "m.Latitude" 
       [longitude] = "m.Longitude">

    <agm-info-window [disableAutoPan]="false" #infoWindow>
      <strong>InfoWindow content</strong>
    </agm-info-window>
  </agm-marker>
</agm-map>

location.json

import { Component, OnInit } from '@angular/core';
import { DeviceDataService } from '../../services/device-service/device- 
data.service';

@Component({
  selector: 'app-remote-view',
  templateUrl: './remote-view.component.html',
  styleUrls: ['./remote-view.component.scss']
})
export class RemoteViewComponent implements OnInit {

  lat: number = 39.8283;
  lng: number = -98.5795;
  zoom: number = 4;
  coordinates:any[];

  constructor( private getDeviceLocation: DeviceDataService) 
    {this.getDeviceCoordinates();}

  ngOnInit() {

  }
    getDeviceCoordinates(){
      this.getDeviceLocation.getDeviceCoordinates().subscribe(
        (data:any) => {
            //this.lat = parseFloat(data.response.data[0].latitude);
            //this.lng = parseFloat(data.response.data[0].longitude);
            this.coordinates  = data;
            console.log(this.lat, this.lng);
          })
    };
    onMouseOver(infoWindow, gm) {

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

      gm.lastOpen = infoWindow;

      infoWindow.open();
  }
}

0 个答案:

没有答案