Как отобразить InfoWindow при наведении курсора мыши на угловых 4 - PullRequest
Новая
       12

Как отобразить InfoWindow при наведении курсора мыши на угловых 4

0 голосов
/ 01 мая 2018

Я пытаюсь реализовать Angular Google Map Module (AGM) для проекта Angular 4. Я успешно добавил модуль AGM и смог заполнить маркеры. Тем не менее, мое информационное окно отображается при нажатии на маркер, а не mouseHover. Я пытался подписаться на этот URL , но у меня это не сработало. Пожалуйста, предложите подход. Заранее спасибо...!!! Пожалуйста, найдите мой код ниже

component.html 

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

component.ts 

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

location.json 

[{
    "Name": "Xylem Zelienople",
    "Latitude": 40.7934399,
    "Longitude": -80.1314,
    "Country": "United States",
    "AddressLine": "227 South Division Street ",
    "CityStateAndZip": "Zelienople, PA 16063"
}, {
    "Name": "Xylem Boise",
    "Latitude": 43.57857,
    "Longitude": -116.283069,
    "Country": "United States",
    "AddressLine": "2707 Saturn Way",
    "CityStateAndZip": "Boise ID"
}, {
    "Name": "Xylem Analytics San Diego",
    "Latitude": 32.895888,
    "Longitude": -117.17336,
    "Country": "United States",
    "AddressLine": "9940 Summers Ridge Road",
    "CityStateAndZip": "San Diego, CA 92121-3091"
}, {
    "Name": "Xylem Analytics Raleigh",
    "Latitude": 35.8966417,
    "Longitude": -78.6520511,
    "Country": "United States",
    "AddressLine": "8601 Six Forks Road, Suite 700",
    "CityStateAndZip": "Raleigh, NC 27615"
}, {
    "Name": "Xylem Analytics Middletown",
    "Latitude": 41.592587,
    "Longitude": -72.7235357,
    "Country": "United States",
    "AddressLine": "56 Bradley Street",
    "CityStateAndZip": "Middletown, CT 06457"
}, {
    "Name": "Xylem Analytics College Station",
    "Latitude": 30.564357,
    "Longitude": -96.3024292,
    "Country": "United States",
    "AddressLine": "151 Graham Road",
    "CityStateAndZip": "College Station, TX 77845"
}, {
    "Name": "Principle Environmental, Inc",
    "Latitude": 33.909104,
    "Longitude": -84.480187,
    "Country": "United States",
    "AddressLine": "1770 The Exchange, Suite 210",
    "CityStateAndZip": "Atlanta, GA 30339"
}, {
    "Latitude": 30.516342,
    "Longitude": -90.111274,
    "Country": "United States",
    "AddressLine": "17961 Painters Row",
    "CityStateAndZip": "Covington, LA 70435"
}]
...