将鼠标悬停在列表上时,传单打开弹出窗口

时间:2019-01-29 20:09:24

标签: javascript angular typescript popup leaflet

我的应用程序的一个视图是,一侧上所有引脚的列表,另一侧上有实际引脚的映射。

我希望在用鼠标悬停列表时打开弹出窗口。可以说我的鼠标在列表上的#1上,我想打开相应引脚的弹出窗口。

这是列表组件中的html:

overallStackView

列表组件的ts:

    <table class="table-striped">
      <thead>
        <!-- <th>id</th> -->
        <th>Kunstwerkname</th>
        <th>Strasse</th>
        <th>PLZ</th>
        <th>
          <button class="button-list" (click)="addArtwork()">
            <img src="assets/icons/add.svg">
          </button>
        </th>
      </thead>
      <tbody>
        <tr *ngFor="let artwork of artworkList;" class="artworkList" (mouseover)="previewPopup(artwork)">
          <td>{{artwork.name}}</td>
          <td>{{artwork.streetname}}</td>
          <td>{{artwork.zipcode}}</td>
          <td>
            <button class="button-list" (click)="editArtwork(artwork)">
              <img src="assets/icons/edit.svg">
            </button>
            <button class="button-list" (click)="deleteArtwork(artwork)">
              <img src="assets/icons/delete.svg">
            </button>
          </td>
        </tr>
      </tbody>
    </table>
地图组件的

和ts:

import { Artwork, ArtworkService } from './../_services/artwork.service';
import { Component, OnInit, Output, EventEmitter } from '@angular/core';


@Component({
  selector: 'app-artwork-list',
  templateUrl: './artwork-list.component.html',
  styleUrls: ['./artwork-list.component.css']
})
export class ArtworkListComponent implements OnInit {
  @Output() private add = new EventEmitter();
  @Output() private edit = new EventEmitter<number>();
  @Output() private preview = new EventEmitter<number>();
  artworkList: Artwork[];

  constructor(
    private artworkService: ArtworkService,
) { }

  ngOnInit() {
    this.refresh();
  }
  refresh() {
    this.artworkService.retrieveAll().then(
      artworkList => this.artworkList = artworkList
    );
  }

  addArtwork() {
    console.log('add artwork');
    this.add.emit();
  }

  editArtwork(artwork: Artwork) {
    console.log('edit artwork ' + artwork.name + ' ' + artwork.id );
    this.edit.emit(artwork.id);
  }

  deleteArtwork(artwork: Artwork) {
    console.log('delete artwork ' + artwork.name + ' ' + artwork.id );
    this.artworkService.delete(artwork.id).then(
      () => this.refresh()
    );
  }

  previewPopup(artwork: Artwork) {
    console.log("hovering mouse");
    console.log(artwork.id);
    this.preview.emit(artwork.id);
  }

}

2 个答案:

答案 0 :(得分:1)

可以考虑以下方法。假设标记的初始数据以以下格式表示:

locations = [
    {
      name: "Oslo",
      lat: 59.923043,
      lng: 10.752839
    },
    {
      name: "Stockholm",
      lat: 59.339025,
      lng: 18.065818
    },
    //..
  ];

然后可以像这样初始化地图上给定的数据标记:

this.markers = this.locations.map(loc => {
    const marker = new L.marker({ lat: loc.lat, lng: loc.lng });
    marker.bindPopup(loc.name);
    marker.addTo(map);
    return marker;
}); 

现在轮到选择器组件和地图本身之间进行通信了,让我们假设以下选择器:

<ul>
  <li (mouseenter) ="mouseEnter(idx) "  (mouseleave) ="mouseLeave(idx)"  *ngFor="let loc of locations; let idx = index">{{ loc.name }}</li>
</ul>

然后可以像这样控制弹出窗口的可见性:

mouseEnter(selectedIndex) {
   const selectedMarker = this.markers[selectedIndex];
  selectedMarker.openPopup();
}

mouseLeave(selectedIndex) {
   const selectedMarker = this.markers[selectedIndex];
   selectedMarker.closePopup();
}

Here is a demo

答案 1 :(得分:0)

您不必收听mouseovermouseenter

,而不必使用mouseleave

mouseenter上,您将创建一个弹出窗口并将其放置在地图上,在mouseleave上,您将关闭该弹出窗口

带有jQuery的示例代码(我的postContent等于您的插图)

$("div.postContent").on("mouseenter", function(e) {
        var postId = $(this).attr("data-postId");

        tooltipPopup = L.popup();   
        var title = postlistByGlobalId[postId].title;
        tooltipPopup.setContent(title);
        tooltipPopup.setLatLng(markersByGlobalId[postId].getLatLng());
        tooltipPopup.openOn(map);

        $(this).addClass('hover');
    });

$("div.postContent").on("mouseleave", function(e) {
        $(this).removeClass('hover');
        map.closePopup(tooltipPopup);
    });

要实现这一点,您需要为所有艺术品提供唯一的ID(在我的示例中为postId),并将标记放置在关联数组markersByGlobalId

这可能很有用:http://franceimage.github.io/maphttp://franceimage.github.io/map-v1

我的示例是独占的(1个html,1个js文件)。您需要做一些额外的工作才能在Angular应用中使用它。